Rumah > Artikel > hujung hadapan web > jQuery分页插件jqPaginator的使用示例

jQuery分页插件jqPaginator的使用示例

黄舟asal: 2017-08-13 10:10:433226semak imbas

这篇文章主要帮助大家快速掌握jquery分页插件jqPaginator的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文将为大家介绍一款非常赞的jQuery分页插件:jqPaginator。

jqPaginator简洁、高度自定义的jQuery分页组件，适用于多种应用场景。

简介

现在网上各种各样的分页组件很多，但是很难找到十分”称心如意”的，于是jqPaginator诞生了。

我心中理想的分页组件，要不受CSS框架限制，可以使用在各种不同风格中的网页中。以我浅显的经验来看，要达到这个目标，关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义，使其灵活的使用了各种不同的场景。

效果截图：

使用说明

例子

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

复制代码代码如下:

$(&#39;#id&#39;).jqPaginator({ totalPages: 100, visiblePages: 10, currentPage: 1, first: &#39;<li class="first">
<a href="javascript:void(0);">First</a></li>&#39;, prev: &#39;<li class="prev">
<a href="javascript:void(0);">Previous</a></li>&#39;, next: &#39;<li class="next">
<a href="javascript:void(0);">Next</a></li>&#39;, last: &#39;<li class="last">
<a href="javascript:void(0);">Last</a></li>&#39;, page: &#39;<li class="page">
<a href="javascript:void(0);">{{page}}</a></li>&#39;, 
onPageChange: function (num) { $(&#39;#text&#39;).html(&#39;当前第&#39; + num + &#39;页&#39;); } });

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

参数

扩展方法

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

$(&#39;#id&#39;).jqPaginator(&#39;option&#39;, options)

初始化后，动态修改配置

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

销毁jqPaginator

$(&#39;#id&#39;).jqPaginator(&#39;destroy&#39;);

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

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

<script type="text/javascript">
$(function(){
$(&#39;#page&#39;).jqPaginator({
//totalPages: 100,
pageSize:2,//每一页多少条记录
totalCounts:${totalCount},
visiblePages: 10,
currentPage: 1,

first: &#39;<li class="first"><a href="javascript:void(0);">First</a></li>&#39;,
prev: &#39;<li class="prev"><a href="javascript:void(0);">Previous</a></li>&#39;,
next: &#39;<li class="next"><a href="javascript:void(0);">Next</a></li>&#39;,
last: &#39;<li class="last"><a href="javascript:void(0);">Last</a></li>&#39;,
page: &#39;<li class="page"><a href="javascript:void(0);">{{page}}</a></li>&#39;,
onPageChange: function (num) {
// alert(&#39;当前第&#39; + num + &#39;页&#39;);
//此处可以ajax加载下一页数据
$.get(&#39;ajaxpage&#39;,{num:num},function(data){
$("#tab").html(&#39;<tr><th>书籍Id</th><th>书名</th><th>价格</th><th>操作</th></tr>&#39;);
for(var i=0;i<data.length;i++){

$("#tab").append(&#39;<tr><td>&#39;+data[i].id+&#39;</td><Td>&#39;+data[i].bookName+&#39;</Td><td>&#39;+data[i].bookPrice+&#39;</td>&#39;+
&#39;<td><a href="/test_maven/updateBook?id=${book.id }">修改</a> <a href="#">删除</a></td> </tr>&#39;);
}
},&#39;json&#39;)
}
});
})

</script>
<title>Insert title here</title>
</head>
<body>
<h1>所有书籍</h1>
<table id="tab">
<tr><th>书籍Id</th><th>书名</th><th>价格</th><th>操作</th></tr>
<c:forEach items="${books }" var="book">

<tr><td>${book.id }</td><Td>${book.bookName }</Td><td>${book.bookPrice }</td>
<td><a href="/test_maven/updateBook?id=${book.id }">修改</a> <a href="#">删除</a></td>
</tr>

</c:forEach>


</table>

Atas ialah kandungan terperinci jQuery分页插件jqPaginator的使用示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery同步Ajax带来的UI线程阻塞问题的解决Artikel seterusnya：关于jQuery Easyui Treegrid如何实现显示checkbox功能的实例

Artikel berkaitan

Lihat lagi