pagination分页插件使用

时间:2022-04-13 08:20:32

之所以写这篇博客,是因为前段时间有用到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分页插件使用
    最终效果
    pagination分页插件使用