基于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)

paging

注意：

　　一定要引入jquery哦