自己寫的一個簡單的JavaScript分頁工具
阿新 • • 發佈:2019-01-07
使用方法:
1、設定分頁的ID分別為: pagin_first(首頁)、 pagin_last(最後一頁)、 pagin_before(上一頁)、 pagin_next(下一頁)、 pagin_totalPage(共多少頁)、 pagin_totalRow(共多少條)、 pagin_select(每頁多少條)、 pagin_input(跳轉到第幾頁) 2、設定回撥函式,即重寫myPagin的before、next、first、last、to方法,如: ① myPagin.before = function(){ 業務邏輯 } ② myPagin.next = function(){ 業務邏輯 }
注:以下注釋部分的html不用管它,主要是為了在開發工具中檢視說明時能夠清晰展示而已。
/** * 使用方法: * <b>1、設定分頁的ID分別為</b> * <table border="0" cellspacing="0" cellpadding="0"> * <tr><td width="120">名稱</td><td width="100">HTML標籤</td><td width="100">說明</td><td width="50">是否必須</td></tr> * <tr><td>pagin_first</td><td></td><td>首頁</td><td>必須</td></tr> * <tr><td>pagin_last</td><td></td><td>最後一頁</td><td>必須</td></tr> * <tr><td>pagin_before</td><td></td><td>上一頁</td><td>必須</td></tr> * <tr><td>pagin_next</td><td></td><td>下一頁</td><td>必須</td></tr> * <tr><td>pagin_totalPage</td><td>i、span</td><td>共多少頁</td><td>必須</td></tr> * <tr><td>pagin_totalRow</td><td>i、span</td><td>共多少條</td><td>必須</td></tr> * <tr><td>pagin_select</td><td>select</td><td>每頁多少條</td><td>必須</td></tr> * <tr><td>pagin_input</td><td>input</td><td>跳轉到第幾頁</td><td>必須</td></tr> * </table> * <br> * <b>2、引入poison-pagin.js檔案</b> * <br> * 3、<b>設定回撥函式</b>,即重寫myPagin的before、next、first、last、to方法的如:<br> * ① myPagin.before = function(){....} <br> * ② myPagin.next = function(){....} <br> * 等等 * <br> */ var myPagin = undefined; ;(function($){ var pagin = { curPage:undefined, perResult:undefined, totalPage:undefined, totalRow:undefined, init:function(){ this.curPage = $("#pagin_input").val(); this.perResult = $("#pagin_select").val(); this.totalPage = $("#pagin_totalPage").text(); this.totalRow = $("#pagin_totalRow").text(); }, before:function(){}, next:function(){}, first:function(){}, last:function(){}, to:function(){}, setValue:function(){ $("#pagin_select").val(that.perResult); $("#pagin_input").val(that.curPage); } } /*初始化*/ pagin.init(); /*繫結:上一頁*/ $("body").on("click","#pagin_before",function(){ pagin.init(); var flag = true; parseInt(pagin.curPage) - 1 >= 1 ?pagin.curPage--:flag=false; flag?pagin.before():""; }); /*繫結:下一頁*/ $("body").on("click","#pagin_next",function(){ pagin.init(); var flag = true; parseInt(pagin.curPage) + 1 <= parseInt(pagin.totalPage)?pagin.curPage++:flag=false; flag?pagin.next():""; }); /*繫結:首頁*/ $("body").on("click","#pagin_first",function(){ pagin.curPage = 1; pagin.first(); }); /*繫結:最後一頁*/ $("body").on("click","#pagin_last",function(){ pagin.curPage = pagin.totalPage; pagin.last(); }); /*繫結:輸入頁碼 回車跳轉*/ $("body").on("keyup","#pagin_input",function(e){ if(e.keyCode=='13'){ var v = $("#pagin_input").val(); $("#pagin_input").val(v); pagin.curPage = v; pagin.to(); } }); /*繫結:輸入頁碼 回車跳轉*/ $("body").on("change","#pagin_select",function(e){ var val = $("#pagin_select").val(); $("#pagin_select").val(val); $("#pagin_input").val(1); pagin.curPage = 1; pagin.perResult = val; pagin.to(); }); myPagin = pagin; })(jQuery);