jQuery自定义分页插件-优快云博客

本文链接：https://blog.youkuaiyun.com/kobe2016/article/details/79077079

插件描述：jQuery分页插件，可自定义样式，默认有五套样式，可自定义插件选项，简单方便

素材在文末

使用方法：

1.引入样式和脚本

<div id="pagination" style="float: right;">
	<input type="text" style="display:none; " id="readAllsum" value="${readAllsum}">
</div>

2.调用插件

$("#pagination").whjPaging({

    //可选，每页显示条数下拉框，默认下拉框5条/页(默认)、10条/页、15条/页、20条/页

    pageSizeOpt: [

        {'value': 5, 'text': '5条/页', 'selected': true},

        {'value': 10, 'text': '10条/页'},

        {'value': 15, 'text': '15条/页'},

        {'value': 20, 'text': '20条/页'}

    ],

    //可选，css设置，可设置值：css-1，css-2，css-3，css-4，css-5，默认css-1，可自定义样式

    css: 'css-1',

    //可选，总页数

    totalPage: 100,

    //可选，展示页码数量，默认5个页码数量

    showPageNum: 5,

    //可选，首页按钮展示文本，默认显示文本为首页

    firstPage: '首页',

    //可选，上一页按钮展示文本，默认显示文本为上一页

    previousPage: '上一页',

    //可选，下一页按钮展示文本，默认显示文本为下一页

    nextPage: '下一页',

    //可选，尾页按钮展示文本，默认显示文本为尾页

    lastPage: '尾页',

    //可选，跳至展示文本，默认显示文本为跳至

    skip: '跳至',

    //可选，确认按钮展示文本，默认显示文本为确认

    confirm: '确认',

    //可选，刷新按钮展示文本，默认显示文本为刷新

    refresh: '刷新',

    //可选，共{}页展示文本，默认显示文本为共{}页，其中{}会在js具体转化为数字

    totalPageText: '共{}页',

    //可选，是否展示首页与尾页，默认true

    isShowFL: true,

    //可选，是否展示每页N条下拉框，默认true

    isShowPageSizeOpt: true,

    //可选，是否展示跳到指定页数，默认true

    isShowSkip: true,

    //可选，是否展示刷新，默认true

    isShowRefresh: true,

    //可选，是否展示共{}页，默认true

    isShowTotalPage: true,

    //可选，是否需要重新设置当前页码及总页数，默认false，如果设为true，那么在请求服务器返回数据时，需要调用setPage方法

    isResetPage: false,

    //必选，回掉函数，返回参数：第一个参数为页码，第二个参数为每页显示N条

    callBack: function (currPage, pageSize) {

        console.log('currPage:' + currPage + '     pageSize:' + pageSize);

    }

});

3.获取当前页码及总页数

// [当前页码, 总页数]

$("#pagination").whjPaging("getPage");

4.设置当前页码及总页数

//参数2: 当前页码, 参数3: 总页数

$("#pagination").whjPaging("setPage", 1, 10);

5.可自定义样式

具体请详细看pagination.css

链接: https://pan.baidu.com/s/1c4atskS 密码: yfcb