自己写的一个简单的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);

猜你喜欢

转载自blog.csdn.net/GeeLoong/article/details/84504907
今日推荐