jQuery实现页码跳转式动态数据分页

2019-11-19 14:37:19

字体：大中小

来源：转载

供稿：网友

我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果：

下面我们给出全部效果代码：

HTML全部代码：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery实现页码跳转式动态数据分页-武林网</title><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><!-- <script type="text/javascript" src="back-endPage.js"></script> --> <!-- 后台分页 --><script type="text/javascript" src="js/front-endPage.js"></script><!-- 前台分页 --><script type="text/javascript" src="js/shujv2.js"></script><link rel="stylesheet" type="text/css" href="css/table.css" rel="external nofollow" ></head><body><div id="histroyBox"></div><script type="text/javascript">  //前台分页的样子  $('#histroyBox').CJJTable({    'title':["装点","卸点","运输货物","下单日期","作者"],//thead中的标题 必填    'body':["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填    'display':[1,1,1,1,1,2],//隐藏域，1显示，2隐藏 必填    'pageNUmber':10,//每页显示的条数 选填    'pageLength':data.length,//选填    'url':data,//数据源 必填    dbTrclick:function(e){//双击tr事件    alert(e.find('.taskCode').html())    }  });  //后台分页的样子  /*$('#histroyBox').CJJTable({    'title':["装点","卸点","运输货物","下单日期"],//thead中的标题 必填    'body':["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段 必填    'display':[1,1,1,1,2,2],//隐藏域，1显示，2隐藏 必填    'pageJson':{      "taskId":528710,      "pageSize":100,//ajax请求参数中的每页展示数量 选填      "token":"yJUmunFeG3REqisYAmCfeA"    },    'url':'api/quoted/quotedList',//数据源 必填    dbTrclick:function(that){ //双击tr事件      alert(that.find('.contactName').html())    }  });*/</script></body></html>

其中<script type="text/javascript" src="js/shujv2.js"></script>是数据JS内容，大家在实际操作的时候可以用JS获取json达到要的数据格式：

shujv2.js代码：

var data = [ {  "warehouseID" : "3750",  "warehouseCode" : "CK20140825061813777127447",  "province" : "上海",  "endProvince" : "江苏省",  "provinceId" : "310000",  "cityId" : "310100",  "areaId" : "310109",  "endProvinceId" : "320000",  "endCityId" : "320600",  "endAreaId" : "320612",  "materialId" : "0",  "material" : "",  "specId" : "0",  "productNId" : "0",  "varietiesId" : "8",  "varietiesTypeId" : "621",  "taskCode" : "T1611230481",  "customerID" : "20147",  "customerName" : "武林网",  "createDate" : "2016-11-23 18:41:40",  "wareHouseName" : "找钢仓库",  "city" : "上海市",  "area" : "虹口区",  "startAddr" : "逸仙路25号",  "endCity" : "南通市",  "endArea" : "通州区",  "endAddr" : "1",  "varietiesTypeName" : "钢材",  "varieties" : "线材",  "productN" : "",  "spec" : "",  "weight" : "1",  "num" : "1",  "receiver" : "",  "receiverPhone" : "1",  "remark" : "",  "label" : "",  "startAddrNumber" : "1",  "varietiesNumber" : "1",  "contactsId" : "22494",  "contactsName" : "刘宇测试" } ]

front-endPage.js是分页加载的效果实现。代码为：

;(function($, window, document,undefined) { var cjjTable = function(ele,opt){    this.$element = ele,    this.defaults ={       title:null,       body:null,       display:null,       pageNUmber:8,       pageLength:0,       url:null,       dbTrclick:function(that){       }    }    this.options = $.extend({},this.defaults,opt) } cjjTable.prototype = {    start:function(){      var _this = this;      var titlelistBox="";      var titlesmall="";      for(var i=0;i<_this.options.title.length;i++){        titlesmall+="<th>"+_this.options.title[i]+"</th>";        titlelistBox = titlesmall;      }      var json = "";      var maxpagenumberBox = 7;//选择项最多的数量      var json = this.options.url;      var histroy_DDBox = "";      var histroy_DD = "";      var firstPageNumber=_this.options.pageLength>_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;      for (var i = 0; i <firstPageNumber; i++) {        var bodyBigBox="";        var bodyBox="";        for(var x=0;x<_this.options.body.length;x++){          var type = _this.options.body[x];          var display = "table-cell";          if(_this.options.body.length>_this.options.title.length&&_this.options.display[x]!=undefined){            display = _this.options.display[x]*1==1?"table-cell":"none";          }          bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";          bodyBigBox = bodyBox;        }        histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";        histroy_DDBox = histroy_DD;      }      $( _this.$element.selector+" table tfoot").html("");      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {        $( _this.$element.selector+" .nextPage").css("display", "none");        $(_this.$element.selector+" .endPage").css("display", "none");      }      var maxpagenumberBoxBigbox = "";      var maxpagenumberBoxBig = "";      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) < maxpagenumberBox) {        for (var i = 0; i < Math.ceil(_this.options.pageLength/ _this.options.pageNUmber); i++) {          var className = "";          if(i==0){            className = "pagenumberBoxLi";          }          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';          maxpagenumberBoxBigbox = maxpagenumberBoxBig;        }      } else {        for (var i = 0; i < maxpagenumberBox; i++) {          var className = "";          if(i==0){            className = "pagenumberBoxLi";          }          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';          maxpagenumberBoxBigbox = maxpagenumberBoxBig;        }      }      var buttonTfoot = "<tr>"+      "<td colspan='"+_this.options.title.length+"'>"+        "<div style='float:right;margin-left:10px;' class='tfootRight'>"+          "<input placeholder='输入页码' type='text'>"+          "<button>确定</button>"+          "</div>"+          "<div style='float:right'>"+            "<span class='firstPage' style='margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;'>首页</span>"+            "<span class='lastPage' style='margin-right:10px;cursor: pointer;float:left;display: none;'>上一页</span>"+            "<ul class='pagenumberBox'>"+maxpagenumberBoxBigbox+"</ul>"+            "<input class='typeNumber' type='text' value='1' onfocus='this.blur()' style='display:none;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #666;margin-right:5px;float:left;margin-top:2.5px;'>"+            "<span class='nextPage' style='margin-right:10px;float:left;cursor: pointer;'>下一页</span>"+            "<span class='endPage' style='cursor: pointer;float:left;'>尾页</span>"+          "</div>"+          "<div style='float:right'>"+             "<select><option value='5'>5</option><option value='10'>10</option><option value='20'>20</option><option value='50'>50</option><option value='100'>100</option><option value='200'>200</option><option value='500'>500</option></select>"          "</div>"+        "</div>"+      "<td>"+      "<tr>";      _this.$element.html("<table class='CJJ-Table'><thead>"+titlelistBox+"</thead><tbody>"+histroy_DDBox+"</tbody><tfoot>"+buttonTfoot+"</tfoot></table>");      $(_this.$element.selector+ ' select').val(_this.options.pageNUmber);      if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber)<2){        $(_this.$element.selector+ ' .endPage').hide();        $(_this.$element.selector+ ' .nextPage').hide();      }      $(_this.$element.selector+ ' .tfootRight input').unbind('keyup').keyup(function(){        _this.inputKeyup(_this,maxpagenumberBox,json);      })      $(_this.$element.selector+ ' .tfootRight button').unbind('click').click(function(){         _this.button(_this,maxpagenumberBox,json);      });      $(_this.$element.selector+ ' .firstPage').unbind('click').click(function(){         _this.firstPage(_this,maxpagenumberBox,json);      });      $(_this.$element.selector+ ' .endPage').unbind('click').click(function(){         _this.endPage(_this,maxpagenumberBox,json);      });      $(_this.$element.selector+ ' .nextPage').unbind('click').click(function(){         _this.nextPage(_this,maxpagenumberBox,json);      });      $(_this.$element.selector+ ' table tfoot ul li').unbind('click').click(function(){         _this.nextTableLi(_this,maxpagenumberBox,json,$(this));      });      $(_this.$element.selector+ ' .lastPage').unbind('click').click(function(){         _this.lastPage(_this,maxpagenumberBox,json);      });      $(_this.$element.selector+ ' select').unbind('change').change(function(){         _this.select(_this,maxpagenumberBox,json,$(this));      });      $(_this.$element.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){         _this.options.dbTrclick($(this));      });    },    inputKeyup:function(e,maxpagenumberBox,json){      var val = $(e.$element.selector+ " .tfootRight input").val();      if (val == 0) {        var val2 = val.replace(0, "");      } else if (val > 0 && val <= Math.ceil(e.options.pageLength / e.options.pageNUmber)) {        var val2 = val.replace(/[^0-9]/g, "");      } else if (val > Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {        var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);      }      $(e.$element.selector+ ' .tfootRight input').val(val2);    },    button:function(e,maxpagenumberBox,json){      var val = $(e.$element.selector+ ' .tfootRight input').val();      $(e.$element.selector+ " .typeNumber").val(val);      if (val != "") {        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);      }    },    firstPage:function(e,maxpagenumberBox,json){      $(e.$element.selector+ " .typeNumber").val(1);      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);    },    endPage:function(e,maxpagenumberBox,json){      $(e.$element.selector+ " .typeNumber").val(Math.ceil(e.options.pageLength / e.options.pageNUmber));      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);    },    nextPage:function(e,maxpagenumberBox,json){      var number = $(e.$element.selector+ " .typeNumber").val();      $(e.$element.selector+ " .typeNumber").val(number * 1 + 1);      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);      },    nextTableLi:function(e,maxpagenumberBox,json,that){      var val = that.html();      $(e.$element.selector+ " .typeNumber").val(val);      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);    },    lastPage:function(e,maxpagenumberBox,json){      var number = $(e.$element.selector+ " .typeNumber").val();      if (number > 1) {        $(e.$element.selector+ " .typeNumber").val(number * 1 - 1);        e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);      }    },    select:function(e,maxpagenumberBox,json,that){      var select = that.find("option:selected").val();      $(e.$element.selector+ " .typeNumber").val(1);       e.options.pageNUmber = select;      e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);    },    page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {      var histroy_DDBox = "";      var histroy_DD = "";      var lastPage=Pagenumber<Math.ceil(e.options.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength;      for (var i =(Pagenumber-1)*pageNUmber; i < lastPage; i++) {        var bodyBigBox="";        var bodyBox="";        for(var x=0;x<e.options.body.length;x++){          var type = e.options.body[x];          var display = "table-cell";          if(e.options.body.length>e.options.title.length&&e.options.display[x]!=undefined){            display = e.options.display[x]*1==1?"table-cell":"none";          }          bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";          bodyBigBox = bodyBox;        }        histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";        histroy_DDBox = histroy_DD;      }      $(that.selector+" table tbody").html(histroy_DD);      var maxpagenumberBoxBigbox = "";      var maxpagenumberBoxBig = "";      if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) < maxpagenumberBox) {        for (var i = 0; i < Math.ceil(e.options.pageLength/ e.options.pageNUmber); i++) {          var className = "";          if(i==0){            className = "pagenumberBoxLi";          }          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';          maxpagenumberBoxBigbox = maxpagenumberBoxBig;        }      } else {        for (var i = 0; i < maxpagenumberBox; i++) {          var className = "";          if(i==0){            className = "pagenumberBoxLi";          }          maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';          maxpagenumberBoxBigbox = maxpagenumberBoxBig;        }      }      $(that.selector+" table tfoot ul").html(maxpagenumberBoxBigbox);      if (Pagenumber == 1) {        $(that.selector+" .firstPage,"+that.selector+" .lastPage").hide();      } else {        $(that.selector+" .firstPage,"+that.selector+" .lastPage").show();      }      if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {        $(that.selector+" .endPage,"+that.selector+" .nextPage").hide();      } else {        $(that.selector+" .endPage,"+that.selector+" .nextPage").show();      }      if (Math.ceil(e.options.pageLength/ pageNUmber) > maxpagenumberBox) {        if (Pagenumber > 0 && Pagenumber < Math.ceil(maxpagenumberBox / 2) * 1 + 1) {          maxpagenumberBoxBigbox = "";          maxpagenumberBoxBig = "";          for (var i = 0; i < maxpagenumberBox; i++) {            maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';            maxpagenumberBoxBigbox = maxpagenumberBoxBig;          }          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');        } else if (Pagenumber >= Math.ceil(maxpagenumberBox / 2) * 1 + 1 && Pagenumber < Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2) {          maxpagenumberBoxBigbox = "";          maxpagenumberBoxBig = "";          for (var i = Pagenumber - Math.ceil(maxpagenumberBox / 2) + 1; i < Pagenumber * 1 + Math.ceil(maxpagenumberBox / 2) * 1; i++) {            maxpagenumberBoxBig += '<li>' + (i) + '</li>';            maxpagenumberBoxBigbox = maxpagenumberBoxBig;          }          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);          $(that.selector+' .pagenumberBox li').eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass('pagenumberBoxLi');        } else if (Pagenumber >= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 && Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {          maxpagenumberBoxBigbox = "";          maxpagenumberBoxBig = "";          for (var i = Math.ceil(e.options.pageLength / pageNUmber) - maxpagenumberBox; i < Math.ceil(e.options.pageLength / pageNUmber); i++) {            maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';            maxpagenumberBoxBigbox = maxpagenumberBoxBig;          }          $(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);          $(that.selector+' .pagenumberBox li').eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass('pagenumberBoxLi');        }      } else {        if (Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {          $(that.selector+' .pagenumberBox li').removeClass('pagenumberBoxLi');          $(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');        }      }      $(that.selector+ ' table tfoot ul li').unbind('click').click(function(){         e.nextTableLi(e,maxpagenumberBox,json,$(this));      });      $(that.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){         e.options.dbTrclick($(this));      });    }   } $.fn.CJJTable = function(options){     var cjj = new cjjTable(this,options);     return cjj.start(); }})(jQuery, window, document);

以上就是这个效果的全部内容，有兴趣的朋友测试一下，需要注意的就是在数据JS中，数据格式和重要，需要增加附加数据一定要确保ID名唯一。感谢你对武林网的支持。

上一篇：AngularJS基于MVC的复杂操作实例讲解

下一篇：React数据传递之组件内部通信的方法