在这里,得着重说一下:
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");


总页数为零时,不显示分页插件,可自定义显示文字及css










当请求服务器返回数据时,需要重新设置当前页码、总页数及总条数

获取当前页码、总页数、总条数及每页显示条数,请用控制台查看