基于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="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哦