基于jquery編寫分頁插件
更新時間:2016年03月07日 11:26:36 作者:正文
這篇文章主要為大家詳細介紹了基于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>
運行效果圖如下:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
相關文章
jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用介紹
jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用,需要的朋友可以參考下。2011-10-10jQuery 中msgTips 頂部彈窗效果實現(xiàn)代碼
最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗,并且不用用戶手動去點擊確定。感覺這樣很方便用戶,下面小編把實現(xiàn)代碼分享給大家,感興趣的的朋友一起看看吧2017-08-08jQuery網(wǎng)頁選項卡插件rTabs用法實例分析
這篇文章主要介紹了jQuery網(wǎng)頁選項卡插件rTabs用法,較為詳細的分析了jquery選項卡插件rTabs的定義、實現(xiàn)及使用方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08