欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-20 17:46:15
我们这次给大家带来的是用jquery实现页码跳转式动态数据分页这个效果,这个效果最明显的就是没有数据加载和刷新页面这个过程,再做小型数据的加载也多级网页加载的时候很有效。我...

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

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名唯一。感谢你对的支持。