How to use jquery pagination plug-in

This time I will show you how to use jquery's paging plug-in, and what are the precautions on how to use jquery's paging plug-in. The following is a practical case, let's take a look.

jqPaginator is a concise and highly customized jQuery paging component, suitable for a variety of application scenarios.

Introduction

There are many kinds of paging components on the Internet, but it is difficult to find one that is very "satisfactory", so jqPaginator was born.

The ideal paging component in my mind should not be restricted by CSS frameworks and can be used in web pages in various styles. From my simple experience, to achieve this goal, the key point is a highly customized Html structure. Therefore, jqPaginator strives to be customized within a reasonable range so that it can be used flexibly in various scenarios.

Effect screenshot:

Instructions for use

Example

The usage is very simple, first introduce jQuery and jqPaginator, and then You can initialize paging

$('#id').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;);
    }});

The above example is the first Demo,

Bootstrap style paging. The specific parameters will be introduced later. What you need to understand here is that if you use class instead of id, all elements of the class will be initialized to achieve the above "two paging linkage" effect.

Parameters

ParametersDefault valueDescriptiontotalPages0Set the total number of pages for pagingtotalCounts0Set the total number of entries for pagingpageSize0Set the number of entries for each pagecurrentPage1Set the current page numbervisiblePages7 Set the maximum number of pages to display (for example, if there are 100, if the current page is 1, then pages 1 - 7 will be displayed) disableClass' disabled'Set the "disabled state" style of the homepage, previous page, next page, and last pageactiveClass'active'Set the current page number stylefirst(None)Set the Html structure of "Homepage"prev(none)Set the Html structure of "previous page"next (None)Set the Html structure of "Next Page"##lastpagewrapperonPageChangecallback function will be passed in

扩展方法

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/

        </p>

推荐解决方案（结合后台）：
首页通过一个具体后台查询跳转过来，带上总页数等数据，方便初始化分页导航条，并在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 id="所有书籍">所有书籍</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>

</p>

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

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

简介

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

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

效果截图：

使用说明

例子

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

$('#id').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的所有元素，实现上面”两个分页联动”的效果。

参数

		Note: Either set totalPages, Either set totalCounts + pageSize, otherwise an error will be reported; after setting totalCounts and pageSize, totalPages will be automatically calculated.
(None)	Set "Last Page" "Html structure
(None)	Set the Html structure of the page number, in which {{page}} can be used to represent the current page, {{totalPages}} represents the total number of pages, {{totalCounts}} represents the total number of entries (for example: the above "minimalist style" Demo uses {{placeholder}} and sets visiblePages to 1. )
(None)	Html wrapper with paging structure, for example: ,
(none)		is generally not used. Triggered when the page is triggered (including when initializing the first page), the page number of the "target page"

参数	默认值	说明
totalPages	0	设置分页的总页数
totalCounts	0	设置分页的总条目数
pageSize	0	设置每一页的条目数 注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。
currentPage	1	设置当前的页码
visiblePages	7	设置最多显示的页码数（例如有100也，当前第1页，则显示1 - 7页）
disableClass	‘disabled’	设置首页，上一页，下一页，末页的”禁用状态”样式
activeClass	‘active’	设置当前页码样式
first	(无)	设置”首页”的Html结构
prev	(无)	设置”上一页”的Html结构
next	(无)	设置”下一页”的Html结构
last	(无)	设置”末页”的Html结构
page	(无)	设置页码的Html结构,其中可以使用{{page}}代表当前页，{{totalPages}}代表总页数，{{totalCounts}}代表总条目数（例如：上面的”极简风格”的Demo，就是使用了{{占位符}}，并将visiblePages设为1实现的。）
wrapper	(无)	分页结构的Html包裹，例如： ，一般不会用到
onPageChange	(无)	回调函数，当换页时触发（包括初始化第一页的时候），会传入”目标页”的页码

扩展方法

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/

        </p>

推荐解决方案（结合后台）：
首页通过一个具体后台查询跳转过来，带上总页数等数据，方便初始化分页导航条，并在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 id="所有书籍">所有书籍</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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样做出京东商品详情的放大镜效果

javascript如何实现小球跳动效果

The above is the detailed content of How to use jquery pagination plug-in. For more information, please follow other related articles on the PHP Chinese website!