首页技术文章正文

jqueryPagination分页插件

更新时间:2018年08月10日14时31分来源:传智播客浏览次数:

【简介】

JqueryPagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据，自定义请求参数，提供多种方法，事件和回调函数，功能全面的分页插件。

【引入的文件】

[HTML] 纯文本查看复制代码

1

2

3

<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.pagination.js"></script>

【代码一】

[HTML] 纯文本查看复制代码

1	`<div` `class="M-box"></div>`

[JavaScript] 纯文本查看复制代码

$('.M-box').pagination({
    callback: function (api) {
        $('.now').text(api.getCurrent());
    }
}, function (api) {
    $('.now').text(api.getCurrent());
});

效果一

效果加了css样式是为了方便观看

【代码二】

开启第一页和最后一页的按钮,并且内容可自定义。内容默认为1和总页数。（注：如coping为false，homePage和endPage无效。）

[HTML] 纯文本查看复制代码

1	`<div` `class="M-box2"></div>`

[JavaScript] 纯文本查看复制代码

$('.M-box2').pagination({
    coping: true,
    homePage: '首页',
    endPage: '末页',
    prevContent: '上页',
    nextContent: '下页'
});

效果二

【代码三】

总数据 100条，每页显示 5条，总页数为 20页

如果配置了数据总数和当前一页显示多少条数据，总页数会自动计算，这种情况下再配置总页数无效。

（注：数据总数totalData和每页显示的条数showData必须同时配置，否则默认使用总页数pageCount。）

[HTML] 纯文本查看复制代码

1	`<div` `class="M-box1"></div>`

[JavaScript] 纯文本查看复制代码

$('.M-box1').pagination({
    totalData: 100,
    showData: 5,
    coping: true
});

效果三

【代码四】

参数：jump，开启跳转到第几页，跳转按钮文本内容可修改。（如果超出最大页数会变成总页数的值）

[HTML] 纯文本查看复制代码

1	`<div` `class="M-box3"></div>`

[JavaScript] 纯文本查看复制代码

$('.M-box3').pagination({
    pageCount: 50,
    jump: true,
    coping: true,
    homePage: '首页',
    endPage: '末页',
    prevContent: '上页',
    nextContent: '下页',
    callback: function (api) {
        console.log(api.getCurrent())
    }
});

效果四

【代码五】

[HTML] 纯文本查看复制代码

1	`<div` `class="M-box4"></div>`

[JavaScript] 纯文本查看复制代码

$('.M-box5').pagination({
    pageCount: 50,
    jump: true,
    callback: function (api) {
        var data = {
            page: api.getCurrent(),
            name: 'mss',
            say: 'oh'
        };
        $.getJSON('https://www.easy-mock.com/mock/58fff7a5739ac1685205ad5d/example/pagination#!method=get', data, function (json) {
            console.log(json);
        });
    }
});