本文將為大家介紹一款非常贊的jQuery分頁(yè)插件:jqPaginator。
jqPaginator簡(jiǎn)潔、高度自定義的jQuery分頁(yè)組件，適用于多種應(yīng)用場(chǎng)景。
簡(jiǎn)介
現(xiàn)在網(wǎng)上各種各樣的分頁(yè)組件很多，但是很難找到十分”稱心如意”的，于是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è)了
參數(shù)
擴(kuò)展方法
jqPaginator提供了兩個(gè)擴(kuò)展方法，方便初始化后對(duì)組件進(jìn)行操作。
$('#id').jqPaginator('option', options)初始化后，動(dòng)態(tài)修改配置
$('#id').jqPaginator('option', { currentPage: 1 });$('#id').jqPaginator('destroy')銷毀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>書籍Id</th><th>書名</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> <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>價(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> <a href="#">刪除</a></td></tr></c:forEach></table>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
