本文将介绍一个很棒的jQuery分页插件：jqPaginator。

JqPaginator是一个简洁且高度定制的jQuery分页组件，适用于各种应用场景。

简介

目前互联网上的分页组件种类很多，但是很难找到一个非常满意的，于是jqPaginator诞生了。

在我看来，如果不受CSS框架的限制，理想的分页组件可以用于不同风格的网页。从我的简单经验来看，要实现这个目标，关键是高度定制的Html结构。因此，jqPaginator力求在合理的范围内进行定制，使其能够灵活运用各种场景。

效果截图：

说明

例子

用法很简单，先介绍jQuery和jqPaginator，然后就可以初始化分页了

复制代码如下： $ ('# ID ')。jq分页器({Total Pages 3360 100，Visible Pages 3360 10，Current Pages 3360 1，First 3360 ' Li Class=' First ' A href=' JavaScript 3360 Void(0)；First/a/li '，prev : ' Li class=' prev ' a href=' JavaScript : void(0)；'上一个/a/li '，下一个： 'li class='下一个' a href=' JavaScript : void(0)；Next/a/li '，last : ' Li class=' last ' a href=' JavaScript : void(0)；'Last/a/li '，page : ' Li class=' page ' a href=' JavaScript : void(0)；{{page}}/a/Li '，在第：页上更改函数(num) {$ ('# text ')。html('当前页面' num ')；} });上面的例子是第一个演示，引导式分页。具体参数后面会介绍。这里我们需要知道的是，如果用类代替id，类的所有元素都会被初始化，实现上面的“两分页联动”效果。

参数

扩展方法

JqPaginator提供了两种扩展方法，方便组件初始化后的操作。

$ ('# id ')。jq分页器(' option '，options)初始化后，动态修改配置

$('#id ')。jqPaginator('option '，{ currentPage: { 1 })；$('#id ')。jqPaginator('销毁')销毁jqPaginator

$('#id ')。jqPaginator('销毁')；相关资料

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

推荐的解决方案(结合背景):

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

脚本类型=' text/JavaScript ' $(function(){ $(' # page ')).jqPaginator({//total page s 3360 100，pageSize:2，//每一页多少条记录totalCounts: $ { totalCount }，visiblePages: 10，currentPage: 1，first : ' Li class=' first ' a href=' JavaScript : void(0)；First/a/li '，prev : ' Li class=' prev ' a href=' JavaScript : void(0)；'上一个/a/li '，下一个： 'li class='下一个a href=' JavaScript : void(0)；Next/a/li '，last : ' Li class=' last ' a href=' JavaScript : void(0)；Last/a/li '，第：页' Li class=' page ' a href=' JavaScript : void(0)；{{page}}/a/li '，onPageChange:函数(num) {//alert('当前第数字页');//此处可以创建交互式、快速动态网页应用的网页开发技术加载下一页数据$.get('ajaxpage '，{ num:num }，function(data){$('#tab ').html('trth书籍id/th书名/th价格/th操作/th/tr '；for(var I=0；idata.lengthi ){$('#tab ').追加(“trtd”数据[i].id '/tdTd '数据[i].bookName/' Ttdd '数据[i].书价/' TD ' ' TDA href='/test _ maven/updateBook？id=${book.id } '修改/aa href='# '删除/a/TD/tr ')；}}，' JSON ')} })；})/脚本标题在此处插入标题/标题/标题dyh 1所有书籍/h1table id='tab'trth书籍id/th书名/th价格/th操作/th/TRC : foreach items=' $ { books } ' var=' book ' trtd $ { book。id }/TDTd $ { book。bookname }/Ttd $ { book。book price }/TDTda href='/test _ maven/updateBook？id=${book.id } '修改/aa href='# '删除/a/td/tr/c:forEach/table以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。