jQuery分页插件jquery.pagination.js使用方法解析

什么是jquery.pagination.js

jquery.pagination.js 是一个基于 jQuery 的分页插件，可以用于在网站中实现分页功能，便于用户查看大量数据。

如何使用jquery.pagination.js

引入文件

首先需要引入jquery和jquery.pagination.js的文件:

<script src="jquery.js"></script>
<script src="jquery.pagination.js"></script>

初始化插件

需要在文档加载完成之后，通过 JavaScript 进行插件的初始化。

基本参数

可以使用以下代码进行初始化。

jQuery('#pagination').pagination({
    totalData: 100,
    showData: 10
});

其中#pagination是插件所要用到的DOM元素，totalData是总数据量，showData是每页展示数据量。

高级参数

插件还支持更多的自定义设置，如下所示:

jQuery('#pagination').pagination({
    pageCount: 5,
    current: 3,
    jump: true,
    count: 3,
    prevContent: '上一页',
    nextContent: '下一页',
    callback: function (api) {
        console.log(api.getCurrent());
    }
});

其中pageCount是总页数，current是当前页码，jump表示是否显示跳转页码，count是连续分页的个数，prevContent和nextContent是上一页和下一页的显示内容，callback是回调函数，它会在用户点击页码时执行，参数api是插件对象。

示例

下面是两个使用jquery.pagination.js的例子。

示例1

<div id="pagination"></div>

jQuery('#pagination').pagination({
    pageCount: 5,
    current: 3,
    jump: true,
    count: 3,
    prevContent: '上一页',
    nextContent: '下一页',
    callback: function (api) {
        console.log(api.getCurrent());
    }
});

该示例设置总页数为5页，当前页为第3页，一页显示3条数据，允许跳转页码，每页显示3个分页按钮，上一页和下一页的按钮文字分别为“上一页”和“下一页”。当用户点击页码按钮时，会在控制台输出当前页码。

示例2

<div id="pagination"></div>
<div id="data"></div>

jQuery('#pagination').pagination({
    totalData: 100,
    showData: 10,
    callback: function (api) {
        var start = (api.getCurrent() - 1) * api.getShowData();
        var end = start + api.getShowData();
        jQuery.ajax({
            dataType: 'json',
            url: '/data',
            data: {
                start: start,
                end: end
            },
            success: function (data) {
                jQuery('#data').html('');
                jQuery.each(data, function (index, item) {
                    jQuery('#data').append('<div>' + item.title + '</div>');
                });
            }
        });
    }
});

该示例设置总数据量为100条，一页显示10条数据。当用户点击页码按钮时，会发送ajax请求获取数据，获取数据时会根据当前页码和每页显示数据量计算出数据的起始位置，并通过jQuery.ajax()发送GET请求，请求响应之后会将数据渲染到页面中。

总结

以上就是jquery.pagination.js的使用方法，可以根据自己的需求进行自定义设置，方便地实现网站分页功能。