1. 程式人生 > >自己寫的一個簡單的JavaScript分頁工具

自己寫的一個簡單的JavaScript分頁工具

使用方法:

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>
 *    &nbsp;&nbsp;<br>
 * <b>2、引入poison-pagin.js檔案</b>
 *    &nbsp;&nbsp;<br>
 * 3、<b>設定回撥函式</b>,即重寫myPagin的before、next、first、last、to方法的如:<br>
 *    &nbsp;① myPagin.before = function(){....} <br>
 *    &nbsp;② myPagin.next = function(){....} <br>
 *    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;等等
 *    <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);