kkpager.js使用心得

https://www.jianshu.com/p/48acd000bd45

kkpager.js为依赖于Jquery的分页插件分页插件官网

分页样式

#kkpager{clear:both;  color:#666666;  padding:5px 0  5px 0 ;  font-size:13px;  height:14px; line-height: 14px;}
#kkpager a{ float: left;  border: 1px solid #e6e6e6;  display: inline;  padding: 3px 6.4px;  margin-right: 5px;  border-radius: 3px;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  cursor: pointer;  background: #ffffff;  text-decoration:none;  color:#333333  }
#kkpager span.disabled{  float: left;  display: inline;  padding: 3px;  margin-right: 5px;  border-radius: 3px;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  border:1px solid #ffffff;  background-color:#6ab4f7;  color:#ffffff;  }
#kkpager span.curr{  float: left;  border: 1px solid #ffffff;  display: inline;  padding: 3px 6.4px;  margin-right: 3px;  border-radius: 3px;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;   background-color:#6ab4f7;  color:#ffffff; }
#kkpager a:hover{  border:1px solid #ffffff; background-color:#6ab4f7;  color:#ffffff; }
#kkpager span.normalsize{  }
#kkpager_gopage_wrap{  position:relative;  left :0 ;  top :0 ; }
#kkpager_btn_go {  width:14px;  height:18px;  border :0 ;  overflow:hidden;  line-height:140%;  padding :0 ;  margin :0 ;  text-align:center;  cursor:pointer;  background-color:#FF6600;  color:#FFF;  position:absolute;  left :0 ;  top:-2px;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  display:none;  }
#kkpager_btn_go_input{  width:16px;  height:14px;  color:#000000;  text-align:center;  margin-left:1px;  margin-right:1px;  border:1px solid #e6e6e6;  position:relative;  -moz-border-radius: 3px;  -webkit-border-radius: 3px;  left :0 ;  top :0 ;  outline:none;  }
#kkpager_btn_go_input.focus{  border-color:#ffffff; }
#kkpager .pageBtnWrap{  float:left;  }
#kkpager .infoTextAndGoPageBtnWrap{  float:right; }
#kkpager .spanDot{  float:left;  margin-right:5px; }
#kkpager .currPageNum{  color:#FD7F4D;  }
#kkpager .infoTextAndGoPageBtnWrap{  padding-top:5px; }

jquery ajax 调用插件，异步加载重新生成分页后，点击的页数还和首次加载一样

//加true 强制重新加载config配置
kkpager.generPageHtml({
  pno:page,
  total:totalPage,
  mode:'click',
  click:function(n){
    this.selectPage(n);
    return false;
  }
},true);

按查询条件重新生成数据和分页，点击分页事件后totalpage 和totalrecord 和没加条件查询的数据一样。

主要原因是因为客户端不会帮你保留总页码数和总条数，
所以在按查询条件重新生成数据时，用hidden按钮绑定你的总页数和总条数
下面是ajax 调用后台数据，返回的总页数和总条数，都存放在hidden里了

$("#totalpages").val(totalPage); //绑定获取的总页数
    $("#totalRecords").val(totalRecords);//绑定获取的总条数
   if (!pageNo) {
        pageNo = 1;
    }
    if (totalRecords > 0) {
      
        FkeepPage(pageNo, totalPage, totalRecords);    //调用分页插件
    }
    else {
        $("#kkpager").html("<div style=‘text-align:center‘>没有符合条件的数据</div>")

    }
    queryInfoTable(tablename, pageSize, pageNo, where); //加载表格数据

调用kkpager

kkpager.generPageHtml({
        pno: pageNo,
        //总页码
        total: totalPage, 
        //总数据条数
        totalRecords: totalRecords,
        mode: ‘click‘,//默认值是link，可选link或者click
        click: function (n) {           
            // do something 
            // this.selectPage(n); //默认的，因为不能符合我的要求改成下面的
  this.selectPage(n, $("#totalpages").val(), $("#totalRecords").val()); 
            queryInfoTable(tablename, pageSize, n, where); //加载表格数据
            return false;
        }
   },true);//加true 默认没有，因为页码数不更新，所以加上了

源码修改

//不刷新页面直接手动调用选中某一页码
selectPage: function (n) {  
this.generPageHtml(this._config,true);
},
//改为
//不刷新页面直接手动调用选中某一页码
selectPage: function (n, b, c) { 
this._config[‘pno‘] = n;
this._config[‘total‘] = b;
this._config[‘totalRecords‘] = c;
this.generPageHtml(this._config,true);
},

作者：小淘气_嘻
链接：https://www.jianshu.com/p/48acd000bd45
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。