Jquery 페이지 매김 플러그인을 사용하는 방법

이번에는 jquery paging 플러그인 사용법과 jquery paging 플러그인 사용법에 대한 Notes에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

jqPaginator는 다양한 애플리케이션 시나리오에 적합한 간단하고 고도로 사용자 정의된 jQuery 페이지 매김 구성 요소입니다.

Introduction

인터넷에 다양한 종류의 페이징 컴포넌트가 있지만 매우 "만족"스러운 것을 찾기가 어렵기 때문에 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;);
    }});

위의 예는 첫 번째 데모인 Bootstrap입니다. 스타일 페이징. 구체적인 매개변수는 나중에 소개하겠습니다. 여기서 이해해야 할 것은 id 대신 class를 사용하면 클래스의 모든 요소가 위의 "2 페이징 연결" 효과를 얻기 위해 초기화된다는 것입니다.

Parameters

Parameters	기본값	Description
totalPages	0	페이징할 총 페이지 수 설정
totalCounts	0	총 개수 설정 페이징 항목 수
pageSize	0	각 페이지의 항목 수 설정 참고: totalPages 또는 totalCounts + pageSize를 설정하세요. 그렇지 않으면 totalCounts 및 pageSize를 설정한 후 오류가 보고됩니다. 계획된.
currentPage	1	현재 페이지 번호 설정
visiblePages	7	표시되는 최대 페이지 수를 설정합니다. (예를 들어 100개가 있는 경우, 현재 페이지가 1인 경우 1부터 1~7페이지가 표시됩니다)
disableClass	'disabled'	홈페이지, 이전 페이지, 다음 페이지, 마지막 페이지의 "비활성화 상태" 스타일을 설정합니다
activeClass	'active'	현재 페이지 번호 스타일 설정
먼저	(없음)	"홈 페이지"의 Html 구조 설정
prev	(없음)	"의 Html 구조 설정" 이전 페이지"
next	(없음)	Set "Under" "한 페이지"의 Html 구조
last	(없음)	"마지막 페이지"의 HTML 구조 설정
page	(none)	페이지 번호의 Html 구조를 설정합니다. 여기서 {{page }}는 현재 페이지를 나타내고, {{totalPages}}는 총 페이지 수를 나타내고, {{totalCounts}를 나타냅니다. }는 총 항목 수를 나타냅니다(예: 위의 "미니멀리스트 스타일" 데모에서는 {{placeholder}}를 사용하고 visiblePages를 1로 설정하여 구현됨)
wrapper	(none)	페이징을 위한 HTML 래퍼 예: , 일반적으로 사용되지 않음
onPageChange	(none)	콜백 함수로 이동하세요. 페이지가 변경되고(첫 번째 페이지 초기화 시 포함) "대상 페이지"의 페이지 번호가 전달됩니다

扩展方法

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中，这样做的好处是，不用每一次都查询总条数，只需要查询当前页面数据即可，速度快，减少数据库负担。具体代码如下，仅供参考：

<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>

               

本文将为大家介绍一款非常赞的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的所有元素，实现上面”两个分页联动”的效果。

参数

参数	默认值	说明
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/

推荐解决方案（结合后台）：
首页通过一个具体后台查询跳转过来，带上总页数等数据，方便初始化分页导航条，并在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如何实现小球跳动效果

위 내용은 Jquery 페이지 매김 플러그인을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!