page.js插件翻页分页

文档

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

文档地址

---

举例