基於jquery分頁插件

　　今天終於完成了基於jquery的分頁插件的代碼編寫，也通過了功能測試，實現了分頁功能；由於剛開始寫jquery的插件，所以梳理邏輯的時間也很長，整個過程整整一周時間，今天終於搞完了，先將整個分頁插件的邏輯分享給大家，並將源碼上傳到自己的github倉庫，有需要的請點擊這里下載；給大家先看一下效果圖;

　　整個分頁邏輯如下：

　　首先判斷分頁類型，有兩種情況，第一：pageCount > showNum；第二：pageCount <= showNum；
　　在第一種情況下還會出現如下三種情況;
　　1、pageNo <= showNum + 2;
　　2、showNum + 2 < pageNo <= pageCount - showNum + 3;
　　3、pageCount - showNum + 3 < pageNo <= pageCount;
　　在1的情況下又分為兩種情況：
　　（1）、pageNo <= showNum;
　　（2）、showNum < pageNo <= showNum + 2;
　　在（2）中情況下面要考慮pageNo是否為最后一頁或倒數第二頁，如果是則隱藏...

提示：

　　pageNo當前頁碼

　　pageCount總頁碼數

　　pageSize每頁顯示條數

　　showNum顯示幾條頁碼在頁面上

　　不多說了，給大家附上js源碼，如果在閱讀的過程中發現問題，歡迎大家在評論區與我探討；

　　

(function($){
    $.fn.paging = function (option) { //通過$.fn定義分頁函數paging，在需要分頁的地方直接調用
        var defaultOptions = {//默認項設置
            pageNo:1,//默認當前頁
            pageSize:10,//默認每頁顯示條數
            count:0,//默認數據總條數
            showNum:6,//默認顯示頁碼數
            jumpTo:true,//默認顯示跳轉指定頁模塊
            jumpBtnName:'確定',//默認跳轉按鈕的名稱
            fontSize:16,//跳轉按鈕字體大小
        };

        var self = this;
        var pagingCount = 0;//共計頁碼
        var Settings = $.extend( {}, defaultOptions, option );/*將defaultOptions對象和option
            隨想相應的屬性合並，並將新的對象賦值給Setting對象本身*/
        $(this).empty();//清空當前DOM節點下面的所有子節點 # $('a').empty() 清空a下面所有的子節點

        var checkDigit = function () {/*校驗數據條數count,每頁顯示條數pageSize,當前頁pageNo,
            顯示頁碼數showNum是否非法輸入*/
            if( Settings.pagNo < 0 || Settings.pageSize < 0 || Settings.count < 0){
                console.error( "請檢查 pagNo,pageSize,count這個三個參數是否存在非法輸入" );
                return false;
            }
            //如果showNum為非法數值，那么設置為默認值
            if( Settings.showNum < 0 ){
                Setting.showNum = 6;
                return true;
            }
        }

        var JsonPageConstruct = function (pageNo,pageCount,pageSize,showNum) {
        //構建分頁頁碼的變現形式，返回json字符串
        //pageNo當前頁碼
        //pageCount總頁碼數
        //pageSize每頁顯示條數
        //showNum顯示幾條頁碼在頁面上
            var data = '';
            if(pageNo == 1){
                data = '{"jsonData":[{"text":"上一頁","num":0,"state":"disabled"},';
            }
            else{
                data = '{"jsonData":[{"text":"上一頁","num":"'+ ( pageNo - 1 ) +'",'+
                '"state":"abled"},';
            }
            /*
                判斷分頁類型，有兩種情況，第一：pageCount > showNum；第二：pageCount <= 
                showNum；
                在第一種情況下還會出現如下三種情況;
                1、pageNo <= showNum + 2;
                2、showNum + 2 < pageNo <= pageCount - showNum + 3;
                3、pageCount - showNum + 3 < pageNo <= pageCount;
                在1的情況下又分為兩種情況：
                （1）、pageNo <= showNum;
                （2）、showNum < pageNo <= showNum + 2;
                在（2）中情況下面要考慮pageNo是否為最后一頁或倒數第二頁，如果是則隱藏...
            */
            if( pageCount > showNum ) {
                if( pageNo <= showNum + 2 ) {
                    if( pageNo <= showNum ) {
                        for(var i= 1 ;i <= showNum ; i++ ){
                            if( pageNo == i ) {
                                data += '{"text":"'+ i +'","num":"'+ i +'","state":"active"},';
                            }
                            else{
                                data += '{"text":"'+ i +'","num":"'+ i +'","state":"abled"},';
                            }
                        }
                        if( pageNo == showNum ) {
                        //顯示頁面后面在刷新出一個，
                        //此時i = showNum + 1,這邊之所以能夠訪問到i，是因為js在聲明變量
                        //的時候提升申明了，提升到最前面聲明
                            data += '{"text":"'+ i +'","num":"'+ i +'","state":"abled"},';
                        }
                    }
                    else{
                        for (var j = 1; j <= pageNo; j++) {
                            if( pageNo == j ) {
                                data += '{"text":"'+ j +'","num":"'+ j +'","state":"active"},';
                            }
                            else{
                                data += '{"text":"'+ j +'","num":"'+ j +'","state":"abled"},';
                            }
                        }
                        if(pageNo != pageCount){
                            data += '{"text":"'+ j +'","num":"'+ j +'","state":"abled"},';
                        }
                    }
                    //如果總頁數pageCount <= showNum + 2,則隱藏...
                    if(pageNo != pageCount){
                        if(pageNo != (pageCount - 1)){
                            data+='{"text":"...","num":"more","state":"disabled"},';
                        }
                    }
                }
                else if(pageNo <= pageCount - showNum + 3){
                    data += '{"text":"1","num":"1","state":"abled"},';
                    data += '{"text":"2","num":"2","state":"abled"},';
                    data += '{"text":"...","num":"more","state":"disabled"},';
                    for (var m = pageNo - 2; m <= pageNo + 2; m++) {
                        if(pageNo == m){
                            data += '{"text":"'+ m +'","num":"'+ m +'","state":"active"},';
                        }
                        else{
                            data += '{"text":"'+ m +'","num":"'+ m +'","state":"abled"},';
                        }
                    }
                    data += '{"text":"...","num":"more","state":"disabled"},';
                }
                else{
                    data += '{"text":"1","num":"1","state":"abled"},';
                    data += '{"text":"2","num":"2","state":"abled"},';
                    data += '{"text":"...","num":"more","state":"disabled"},';
                    for (var n = pageCount - showNum + 1; n <= pageCount; n++) {
                        if(pageNo == n){
                            data += '{"text":"'+ n +'","num":"'+ n +'","state":"active"},';
                        }
                        else{
                            data += '{"text":"'+ n +'","num":"'+ n +'","state":"abled"},';
                        }
                    }
                }
            }
            if(pageNo == pageCount){
                data += '{"text":"下一頁","num":"'+ (pageNo + 1) +'","state":"disabled"}]}';
            }else{
                data += '{"text":"下一頁","num":"'+ (pageNo + 1) +'","state":"abled"}]}';
            }
            var json_return = JSON.parse(data);
            return json_return;
        }

        /*
            將分頁結果顯示到頁面的相應的位置
        */
        function PagingJson(json){
            
            if(parseInt(Settings.count)>0){
                var html = '<ul class="pagination" style="display:flex;list-style:none;">';
                for(var a in json.jsonData){
                    if(json.jsonData[a].state == "disabled"){
                        html +='<li id="pageNum'+ json.jsonData[a].num +'" class="disabled" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>';
                    }
                    else if(json.jsonData[a].state == "active"){
                        html +='<li id="pageNum'+ json.jsonData[a].num +'" class="active" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>';
                        
                    }else{
                        html +='<li id="pageNum'+ json.jsonData[a].num +'" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>';
                    }
                }
                $(self).html(html);
                if(Settings.jumpTo == true){
                    $(self).find(".pagination").append('<span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:18px;font-size:'+ Settings.fontSize +'px">共有'+ pagingCount +'頁/'+ Settings.count +'個</span><div style="display:inline-block" name="changePage"><span class="text-muted" style="margin:5px;margin-left:0px;display:inline-block;font-size:'+ Settings.fontSize +'px">,到第</span> <input type="number" min="1" max="'+ pagingCount +'"class="pagination_change_page" style="width:45px;border-color:#ddd"> <span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:font-size:'+ Settings.fontSize +'px">頁</span> <button class="btn btn-default btn-sm pagination_search">'+ Settings.jumpBtnName +'</button></div>');
                }
            }else{

            }
        }


        

        var main = function () {//主函數
            var check = checkDigit();
            if( check == false ){
                return false;
            }
            var pageNo = parseInt( Settings.pageNo );
            var pageSize = parseInt( Settings.pageSize );
            var count = parseInt( Settings.count );
            if( count % pageSize == 0){
                pagingCount = count / pageSize;
            }
            else{
                pagingCount = parseInt( count / pageSize ) + 1;
            }
            var showNum = parseInt( Settings.showNum );
            var pageJson = JsonPageConstruct(pageNo,pagingCount,pageSize,showNum);
            PagingJson(pageJson);
            $(self).off();
        };
        main();

        
    };
})(jQuery)

注意：

　　一定要引入jquery哦