快速掌握jquery分頁(yè)插件jqPaginator的使用方法

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

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

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

jqPaginator簡(jiǎn)潔、高度自定義的jQuery分頁(yè)組件，適用于多種應(yīng)用場(chǎng)景。

簡(jiǎn)介

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

我心中理想的分頁(yè)組件，要不受CSS框架限制，可以使用在各種不同風(fēng)格中的網(wǎng)頁(yè)中。以我淺顯的經(jīng)驗(yàn)來(lái)看，要達(dá)到這個(gè)目標(biāo)，關(guān)鍵的一點(diǎn)就是高度自定義的Html結(jié)構(gòu)。所以jqPaginator努力做到合理范圍內(nèi)的自定義，使其靈活的使用了各種不同的場(chǎng)景。

效果截圖：

使用說(shuō)明

例子

用法很簡(jiǎn)單，首先引入jQuery和jqPaginator，之后就可以初始化分頁(yè)了

復(fù)制代碼代碼如下:

$('#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('當(dāng)前第' + num + '頁(yè)'); } });

上例就是第一Demo，Bootstrap風(fēng)格的分頁(yè)。具體參數(shù)稍后介紹，這里要了解的是，如果使用的不是id，而是class，就會(huì)初始化該class的所有元素，實(shí)現(xiàn)上面”兩個(gè)分頁(yè)聯(lián)動(dòng)”的效果。

參數(shù)

擴(kuò)展方法

jqPaginator提供了兩個(gè)擴(kuò)展方法，方便初始化后對(duì)組件進(jìn)行操作。

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

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

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

銷(xiāo)毀jqPaginator

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

相關(guān)資料

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

推薦解決方案（結(jié)合后臺(tái)）：

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

<script type="text/javascript">
$(function(){
$('#page').jqPaginator({
//totalPages: 100,
pageSize:2,//每一頁(yè)多少條記錄
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('當(dāng)前第' + num + '頁(yè)');
//此處可以ajax加載下一頁(yè)數(shù)據(jù)
$.get('ajaxpage',{num:num},function(data){
$("#tab").html('<tr><th>書(shū)籍Id</th><th>書(shū)名</th><th>價(jià)格</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>所有書(shū)籍</h1>
<table id="tab">
<tr><th>書(shū)籍Id</th><th>書(shū)名</th><th>價(jià)格</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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: