如何在jquery中使用jqPaginator分页插件

这期内容当中小编将会给大家带来有关如何在jquery中使用jqPaginator分页插件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都创新互联专注于企业营销型网站、网站重做改版、五峰网站定制设计、自适应品牌网站建设、H5网站设计、商城开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为五峰等各大城市提供网站开发制作服务。

使用说明

用法很简单，首先引入jQuery和jqPaginator，之后就可以初始化分页了

复制代码 代码如下:

$('#id').jqPaginator({ totalPages: 100, visiblePages: 10, currentPage: 1, first: '

First

', prev: '

Previous

', next: '

Next

', last: '

Last

', page: '

{{page}}

', onPageChange: function (num) { $('#text').html('当前第' + num + '页'); } });

上例就是第一Demo，Bootstrap风格的分页。具体参数稍后介绍，这里要了解的是，如果使用的不是id，而是class，就会初始化该class的所有元素，实现上面”两个分页联动”的效果。

参数

扩展方法

jqPaginator提供了两个扩展方法，方便初始化后对组件进行操作。

$('#id').jqPaginator('option', options)

初始化后，动态修改配置

$('#id').jqPaginator('option', { currentPage: 1 });
$('#id').jqPaginator('destroy')

销毁jqPaginator

$('#id').jqPaginator('destroy');

相关资料

源码下载：https://github.com/keenwon/jqPaginator
官方地址：http://jqpaginator.keenwon.com/

推荐解决方案（结合后台）：

首页通过一个具体后台查询跳转过来，带上总页数等数据，方便初始化分页导航条，并在table中显示第一页数据。
后续点击每一页按钮都发出ajax请求，并将该页数据作为json返回，填充到table中，这样做的好处是，不用每一次都查询总条数，只需要查询当前页面数据即可，速度快，减少数据库负担。具体代码如下，仅供参考：

$(function(){
$('#page').jqPaginator({
//totalPages: 100,
pageSize:2,//每一页多少条记录
totalCounts:${totalCount},
visiblePages: 10,
currentPage: 1,

first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last',
page: '{{page}}',
onPageChange: function (num) {
// alert('当前第' + num + '页');
//此处可以ajax加载下一页数据
$.get('ajaxpage',{num:num},function(data){
$("#tab").html('书籍Id书名价格操作');
for(var i=0;i'+data[i].id+''+data[i].bookName+''+data[i].bookPrice+''+
'修改 删除 ');
}
},'json')
}
});
})





所有书籍

书籍Id书名价格操作


${book.id }${book.bookName }${book.bookPrice }
修改 删除

上述就是小编为大家分享的如何在jquery中使用jqPaginator分页插件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。

当前名称：如何在jquery中使用jqPaginator分页插件
文章URL：http://bjjierui.cn/article/jsjhip.html