jQuery分页插件

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

素材在文末

使用方法：

1.引入样式和脚本

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