這篇文章主要幫助大家快速掌握jquery分頁外掛jqPaginator的使用方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下
本文將為大家介紹一款非常讚的jQuery分頁外掛:jqPaginator。
jqPaginator簡潔、高度自訂的jQuery分頁元件，適用於多種應用場景。
簡介
現在網路上各種各樣的分頁元件很多，但是很難找到十分」稱心如意」的，於是jqPaginator誕生了。
我心中理想的分頁元件，要不受CSS框架限制，可以使用在各種不同風格中的網頁中。以我淺顯的經驗來看，要達到這個目標，關鍵的一點就是高度自訂的Html結構。所以jqPaginator努力做到合理範圍內的自定義，使其靈活的使用了各種不同的場景。
效果截圖：
使用說明
範例
##用法很簡單，首先引入jQuery和jqPaginator，之後就可以初始化分頁了
複製程式碼 程式碼如下：
$('#id').jqPaginator({ totalPages: 100, 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);">Previous</a></li>', next: '<li class="next">
<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>',
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');
登入後複製
推薦解決方案（結合後台）：
#首頁透過一個具體後台查詢跳轉過來，帶上總頁數等數據，方便初始化分頁導航條，並在table中顯示第一頁資料。
後續點擊每一頁按鈕都發出ajax請求，並將該頁資料作為json返回，填充到table中，這樣做的好處是，不用每一次都查詢總條數，只需要查詢當前頁面資料即可，速度快，減少資料庫負擔。具體程式碼如下，僅供參考：
<script type="text/javascript">
$(function(){
$('#page').jqPaginator({
//totalPages: 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);">Previous</a></li>',
next: '<li class="next"><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>',
onPageChange: function (num) {
// alert('当前第' + num + '页');
//此处可以ajax加载下一页数据
$.get('ajaxpage',{num:num},function(data){
$("#tab").html('<tr><th>书籍Id</th><th>书名</th><th>价格</th><th>操作</th></tr>');
for(var i=0;i<data.length;i++){
$("#tab").append('<tr><td>'+data[i].id+'</td><Td>'+data[i].bookName+'</Td><td>'+data[i].bookPrice+'</td>'+
'<td><a href="/test_maven/updateBook?id=${book.id }">修改</a> <a href="#">删除</a></td> </tr>');
}
},'json')
}
});
})
</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>登入後複製
以上是jQuery分頁外掛程式jqPaginator的使用範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
