pagination分页插件使用

Posted 2020-12-28 ljzy

之所以写这篇博客，是因为前段时间有用到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)
  
  最终效果