首頁 > 開發者 > JavaScript
基於jquery編寫分頁外掛程式，jquery編寫分頁外掛程式
擴充JQuery很容易，作為一個練習，編寫一個簡單的分頁外掛程式，代碼量不大，直接看代碼好了：
$.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.perPage); } function selectPage(page){ return function(){ currPage = page; if (page<0) currPage = 0; if (page>=numPages()) currPage = numPages()-1; render(); $('img.page-wait',panel).attr('src','images/wait.gif'); opts.callback(currPage+1); $('img.page-wait',panel).attr('src','images/nowait.gif'); } } function render(){ var html = '<table><tbody><tr>' +'<td><a href="#"><img class="page-first"></a></td>' +'<td><a href="#"><img class="page-prev"></a></td>' +'<td><span>第<input type="text" class="page-num">頁/共'+numPages()+'頁</span></td>' +'<td><a href="#"><img class="page-next"></a></td>' +'<td><a href="#"><img class="page-last"></a></td>' +'<td><img src="images/nowait.gif" class="page-wait"></td>' +'<td><span style="padding-left:50px;">檢索到'+totalProperty+'記錄</span></td>' +'</tr></tbody></table>'; var imgFirst = 'images/page-first-disabled.gif'; var imgPrev = 'images/page-prev-disabled.gif'; var imgNext = 'images/page-next-disabled.gif'; var imgLast = 'images/page-last-disabled.gif'; if (currPage > 0){ imgFirst = 'images/page-first.gif'; imgPrev = 'images/page-prev.gif'; } if (currPage < numPages()-1){ imgNext = 'images/page-next.gif'; imgLast = 'images/page-last.gif'; } panel.empty(); panel.append(html); $('img.page-first',panel) .bind('click',selectPage(0)) .attr('src',imgFirst); $('img.page-prev',panel) .bind('click',selectPage(currPage-1)) .attr('src',imgPrev); $('img.page-next',panel) .bind('click',selectPage(currPage+1)) .attr('src',imgNext); $('img.page-last',panel) .bind('click',selectPage(numPages()-1)) .attr('src',imgLast); $('input.page-num',panel) .val(currPage+1) .change(function(){ selectPage($(this).val()-1)(); }); } var currPage = 0; var panel = $(this); render(); }); }
下面測試一下：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mypagination.css"/> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.mypagination.js"></script> <script> $(document).ready(function(){ $('#mypage').mypagination(10112,{ callback:function(page){ alert(page); } }); }); </script> </head> <div id="mypage" class="mypagination"></div>
運行如下：
以上就是本文的全部內容，希望對大家的學習有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
