之所以寫這篇博客，是因為前段時間有用到pagination.js，網上的各種配置使用方法，但我發現多個版本使用方法有出入，所有寫下這篇博客，供以後查看。

註：此插件基於jq，必須先引入jq才能正常使用。

    引入pagination.js;pagination.css;

插件鏈接：https://github.com/ljzy1026/pagination

• html

  一個id為pagination的div

• js

  // 初始化分頁模塊
  // sort是本項目ajax請求需要的一個參數
  function pageStart(sort) {
  var container = $(‘#pagination‘);
  // sort需要定義才能被回調函數獲取到
  var sort = sort || 11;
  // 初始化
  container.pagination({
  // 數據源，好幾種寫法（直接寫數組；寫函數中包含ajax請求；直接寫url）
  dataSource: ‘/essaymanage/getessaylist?status=-1&sort=‘ + sort,
  // 數據最終來源 res.data
  locator: ‘data‘,
  // 總數，一般都是從後臺拿的（寫死是totalNumber參數）
  totalNumberLocator: function(response) {
  return response.num;
  },
  // 每頁條目數
  pageSize: 10,
  // 起始頁數
  pageNumber: 1,
  // 參數名一般有變化，給上面兩個參數起別名
  alias: {
  pageNumber: ‘page‘,
  pageSize: ‘size‘
  },
  // 上一頁文本
  prevText: ‘<‘,
  // 下一頁文本
  nextText: ‘>‘,
  ajax: {
  beforeSend: function() {
  container.prev().html(‘Loading data from flickr.com ...‘);
  }
  },
  // 回調函數
  callback: function(res, pagination) {
  console.log(sort);
  // 先清空顯示區域
  $(‘.tb tr:gt(0)‘).hide();
  // 循環拿數據，插入數據
  for (var i = 0; i < res[‘length‘]; i++) {
  // 拿數據，處理數據...
  }
  }
  })
  }
  pageStart();

• css(自定義css)
  
  最終效果
  

pagination分頁插件使用