簡單實用的jQuery分頁外掛程式

標籤：

     在做商城和訂單管理的時候，常常會用到分頁功能，所以我封裝了一個jQuery的分頁外掛程式，該外掛程式主要實現上下翻頁，輸入數字跳轉等功能。

具體實現如下：

      輸入參數需要當前頁碼pageNo，總頁碼totalPage，回呼函數callback。

　　主要的實現有兩個函數，一個是根據當前頁和總頁數產生相應的html的代碼，一個是事件綁定及回呼函數的執行。

      creatHtml函數：

creatHtml:function(){    var me=this;    var content="";
　　//當前頁碼    var current=me.options.pageNo;
　　//總頁碼    var total=me.options.totalPage;
　　//當前頁碼大於1顯示向上翻頁按鈕    if(current > 1){        content += "<a><</a>";    }
　　//總頁數大於7，根據當前頁顯示省略符號，否則顯示全部頁碼    if(total > 7){        if(current < 4){            for(var i=1;i<7;i++){                if(current==i){                    content += "<a class=‘current‘>"+i+"</a>";                }else{                    content += "<a>"+i+"</a>";                }            }            content += "...";            content += "<a>"+total+"</a>";        }else{            if(current < total - 3){                content += "<a name=‘1‘ type=‘button‘ class=‘page num‘>1</a>";                content += "...";                for(var i=current-2;i<current+3;i++){                    if(current==i){                        content += "<a class=‘current‘>"+i+"</a>";                    }else{                        content += "<a>"+i+"</a>";                    }                }                content += "...";                content += "<a>"+total+"</a>";            }else{                content += "<a>1</a>";                content += "...";                for(var i=total-5;i<total+1;i++){                    if(current==i){                        content += "<a class=‘current‘>"+i+"</a>";                    }else{                        content += "<a>"+i+"</a>";                    }                }            }        }    }else{        for(var i=1;i<total+1;i++){            if(current==i){                content += "<a class=‘current‘>"+i+"</a>";            }else{                content += "<a>"+i+"</a>";            }        }    }
　　//當前頁小於總頁數，顯示向下翻頁按鈕    if(current < total){        content += "<a>></a>";    }
　　//輸入跳轉    content += " 到第 ";    content += "<input max=‘3‘ maxlength=‘3‘ value=‘"+current+"‘ type=‘text‘ />";    content += " 頁 ";    content += "<a>Go</a>";
　　//更新HTML    me.element.html(content);}

    bindEvent函數：

bindEvent:function(){    var me=this;
　　//分頁點擊事件    me.element.on(‘click‘,‘a‘,function(){        var num=$(this).html();        if(num=="&lt;"){//上翻            me.options.pageNo=+me.options.pageNo-1;        }else if(num=="&gt;"){//下翻            me.options.pageNo=+me.options.pageNo+1;        }else if(num=="Go"){//輸入頁碼跳轉            var ipt=+me.element.find(‘input‘).val();            if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){                me.options.pageNo=ipt;            }        }else{//直接跳轉            me.options.pageNo=+num;        }
　　　　//更新html        me.creatHtml();
　　　　//調用回呼函數，返回當前頁碼        if(me.options.callback){            me.options.callback(me.options.pageNo);        }    });}

　　將函數封裝起來，完整如下：

;(function($,window,document,undefined){    var initDate={        pageNo:1,        totalPage:1,        callback:function(){}    };    function Paging(element,options){        this.element = element;        this.options=options=$.extend(initDate,options||{});        this.init();    }    Paging.prototype={         constructor:Paging,        init:function(){            this.creatHtml();            this.bindEvent();        },        creatHtml:function(){            var me=this;            var content="";            var current=me.options.pageNo;            var total=me.options.totalPage;            if(current > 1){                content += "<a><</a>";            }            if(total > 7){                if(current < 4){                    for(var i=1;i<7;i++){                        if(current==i){                            content += "<a class=‘current‘>"+i+"</a>";                        }else{                            content += "<a>"+i+"</a>";                        }                    }                    content += "...";                    content += "<a>"+total+"</a>";                }else{                    if(current < total - 3){                        content += "<a name=‘1‘ type=‘button‘ class=‘page num‘>1</a>";                        content += "...";                        for(var i=current-2;i<current+3;i++){                            if(current==i){                                content += "<a class=‘current‘>"+i+"</a>";                            }else{                                content += "<a>"+i+"</a>";                            }                        }                        content += "...";                        content += "<a>"+total+"</a>";                    }else{                        content += "<a>1</a>";                        content += "...";                        for(var i=total-5;i<total+1;i++){                            if(current==i){                                content += "<a class=‘current‘>"+i+"</a>";                            }else{                                content += "<a>"+i+"</a>";                            }                        }                    }                }            }else{                for(var i=1;i<total+1;i++){                    if(current==i){                        content += "<a class=‘current‘>"+i+"</a>";                    }else{                        content += "<a>"+i+"</a>";                    }                }            }            if(current < total){                content += "<a>></a>";            }            content += " 到第 ";            content += "<input max=‘3‘ maxlength=‘3‘ value=‘"+current+"‘ type=‘text‘ />";            content += " 頁 ";            content += "<a>Go</a>";            me.element.html(content);        },        bindEvent:function(){            var me=this;            me.element.on(‘click‘,‘a‘,function(){                var num=$(this).html();                if(num=="&lt;"){                    me.options.pageNo=+me.options.pageNo-1;                }else if(num=="&gt;"){                    me.options.pageNo=+me.options.pageNo+1;                }else if(num=="Go"){                    var ipt=+me.element.find(‘input‘).val();                    if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){                        me.options.pageNo=ipt;                    }                }else{                    me.options.pageNo=+num;                }                me.creatHtml();                if(me.options.callback){                    me.options.callback(me.options.pageNo);                }            });        }    };    $.fn.paging=function(options){        options=$.extend(initDate,options||{});        return new Paging($(this),options);    }})(jQuery,window,document);

　　HTML：

<div id="page"></div>

　　js引用：

$(‘#page‘).paging({pageNo:2,totalPage:10,callback:function(cur){       console.log(‘當前頁：’+cur);//當前頁：2}});

　　這裡加了一些簡單的樣式，可以根據具體的ui設計來設計樣式。

    <style type="text/css">    a{        width: 23px;        height: 23px;        border: 1px solid #dce0e0;        text-align: center;        margin: 0 4px;        cursor: pointer;        display: inline-block;    }    .current{        background-color: #5ac3e7;    }    </style>

 

github地址：https://github.com/Martian1/jQuery.paging.js    

 

簡單實用的jQuery分頁外掛程式