jQuery分页插件 支持IE8

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

在这里，得着重说一下：
1.初始化分页插件时，是数字类型的参数最好不要用字符串来表示，不然渲染可能会有问题.
2.使用setPage方法时，必须注意传入的参数是数字类型，而不是字符串类型，如果是字符串类型，请使用parseInt()转化下.
3.当前插件适合与ajax结合使用或者是静态分页，不建议url刷新分页，初衷设计就是为了前后端分离.
4.如果真的需要url刷新分页，那么也是可以的，每次刷新分页后，先初始化插件并且不去设置总页数参数，然后在使用setPage方法即可.
5.插件初始化的时候没有开放当前页参数，默认为1.
6.插件兼容原生IE8，但jq库得支持IE8才行.

使用ajax分页例子，默认每页 5条(建议初始化分页插件参数isResetPage设为 true)：

function loadData(currPage, pageSize) {
    $.ajax({
        //其它参数选项请自填
        success: function(res) {
            //处理数据
            //设置分页插件显示
            $("#pagination").whjPaging("setPage", {
                currPage: res.currPage,
                totalPage: res.totalPage,
                totalSize: res.totalSize
            });
        }
    });
}
$("#pagination").whjPaging({
    //设为true时，ajax里的success函数必须调用setPage方法，否则分页插件显示保持不变
    isResetPage: true,
    callBack: function(currPage, pageSize) {
        loadData(currPage, pageSize);
    }
});
loadData(1, 5);

使用静态数据分页例子，默认每页5条(建议初始化分页插件参数isResetPage设为 false，默认 false)：

function loadData(currPage, pageSize) {
    //处理数据
}
$("#pagination").whjPaging({
    //静态数据已知的总条数
    totalSize: 90,
    //静态数据已知的总页数
    totalPage: 18,
    callBack: function(currPage, pageSize) {
        loadData(currPage, pageSize);
    }
});
loadData(1, 5);

初始化分页插件参数：

var options = {
    //可选，css设置，可设置值：css-1，css-2，css-3，css-4，css-5，默认css-1，可自定义样式
    css: 'css-1',
    //可选，每页条数下拉框，5条/页(默认)、10条/页、15条/页、20条/页
    pageSizeOpt: [{
        value: 5,
        text: '5条/页',
        selected: true
    }, {
        value: 10,
        text: '10条/页'
    }, {
        value: 15,
        text: '15条/页'
    }, {
        value: 20,
        text: '20条/页'
    }],
    //可选，总条数
    totalSize: 90,
    //可选，总页数
    totalPage: 18,
    //可选，展示页码数量，默认5个页码数量
    showPageNum: 5,
    //可选，首页按钮展示文本，默认显示文本为首页
    firstPage: "首页",
    //可选，上一页按钮展示文本，默认显示文本为上一页
    previousPage: "上一页",
    //可选，下一页按钮展示文本，默认显示文本为下一页
    nextPage: "下一页",
    //可选，尾页按钮展示文本，默认显示文本为尾页
    lastPage: "尾页",
    //可选，跳至展示文本，默认显示文本为跳至
    skip: "跳至",
    //可选，确认按钮展示文本，默认显示文本为确认
    confirm: "确认",
    //可选，刷新按钮展示文本，默认显示文本为刷新
    refresh: "刷新",
    //可选，共{}页展示文本，默认显示文本为共{}页，其中{}会在js具体转化为数字
    totalPageText: "共{}页",
    //可选，共{}条记录展示文本，默认显示文本为共{}条记录，其中{}会在js具体转化为数字
    totalSizeText: "共{}条记录",
    //可选，是否展示首页与尾页，默认true
    isShowFL: true,
    //可选，是否展示每页条数下拉框，默认true，如果设置显示，总条数必须设置
    isShowPageSizeOpt: true,
    //可选，是否展示跳到指定页数，默认true
    isShowSkip: true,
    //可选，是否展示刷新，默认true
    isShowRefresh: true,
    //可选，是否展示共{}页，默认true
    isShowTotalPage: true,
    //可选，是否展示共{}条记录，默认true
    isShowTotalSize: true,
    //可选，是否需要重新设置当前页码、总页数及总条数，默认false，如果设为true，那么在请求服务器返回数据时，需要调用setPage方法
    isResetPage: false,
    //必选，回掉函数，返回参数：第一个参数为页码，第二个参数为每页显示N条
    callBack: function(currPage, pageSize) {
        console.log('currPage:' + currPage + ' pageSize:' + pageSize);
    }
};

setPage | getPage方法：

//setPage方法
$("#pagination").whjPaging("setPage", {currPage: 当前页码, totalPage: 总页数, totalSize: 总条数});

//getPage方法，返回一个对象 {totalSize: 总条数, currPage: 当前页码, pageSize: 每页显示条数, totalPage: 总页数}
$("#pagination").whjPaging("getPage");

image.png
image.png

原创文章，原创插件！转载请注明出处！

插件地址: http://www.jq22.com/jquery-info17548
GitHub地址: https://github.com/w0624/jquery-pagination