快速掌握jquery分頁插件jqPaginator的使用方法

更新時間：2017年08月09日 11:21:02 作者：wonderful_life_mrchi

這篇文章主要幫助大家快速掌握jquery分頁插件jqPaginator的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文將為大家介紹一款非常贊的jQuery分頁插件:jqPaginator。

jqPaginator簡潔、高度自定義的jQuery分頁組件，適用于多種應用場景。

簡介

現(xiàn)在網(wǎng)上各種各樣的分頁組件很多，但是很難找到十分”稱心如意”的，于是jqPaginator誕生了。

我心中理想的分頁組件，要不受CSS框架限制，可以使用在各種不同風格中的網(wǎng)頁中。以我淺顯的經(jīng)驗來看，要達到這個目標，關鍵的一點就是高度自定義的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風格的分頁。具體參數(shù)稍后介紹，這里要了解的是，如果使用的不是id，而是class，就會初始化該class的所有元素，實現(xiàn)上面”兩個分頁聯(lián)動”的效果。

參數(shù)

擴展方法

jqPaginator提供了兩個擴展方法，方便初始化后對組件進行操作。

$('#id').jqPaginator('option', options)

初始化后，動態(tài)修改配置

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

銷毀jqPaginator

$('#id').jqPaginator('destroy');

相關資料

源碼下載：https://github.com/keenwon/jqPaginator
官方地址：http://jqpaginator.keenwon.com/

推薦解決方案（結合后臺）：

首頁通過一個具體后臺查詢跳轉過來，帶上總頁數(shù)等數(shù)據(jù)，方便初始化分頁導航條，并在table中顯示第一頁數(shù)據(jù)。
后續(xù)點擊每一頁按鈕都發(fā)出ajax請求，并將該頁數(shù)據(jù)作為json返回，填充到table中，這樣做的好處是，不用每一次都查詢總條數(shù)，只需要查詢當前頁面數(shù)據(jù)即可，速度快，減少數(shù)據(jù)庫負擔。具體代碼如下，僅供參考：

<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加載下一頁數(shù)據(jù)
$.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>&nbsp;<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>&nbsp;<a href="#">刪除</a></td>
</tr>

</c:forEach>


</table>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: