jQuery+ajax怎么样实现动态数据分页-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

jQuery+ajax怎么样实现动态数据分页

php中世界最好的语言

Mar 15, 2018 pm 01:19 PM

Bagaimana puladata

这次给大家带来jQuery+ajax怎么样实现动态数据分页，用jQuery+ajax实现动态数据分页的注意事项有哪些，下面就是实战案例，一起来看一下。

用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。

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

HTML全部代码：

<!DOCTYPE html>
<html>
<head>
<met
    }
  });*/
</script>
</body>
</html>

其中是数据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=&#39;"+type+"&#39; style=&#39;display:"+display+"&#39;>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr class=&#39;new_productBox&#39;>"+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 += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i < maxpagenumberBox; i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      var buttonTfoot = "<tr>"+
      "<td colspan=&#39;"+_this.options.title.length+"&#39;>"+
        "<p style=&#39;float:right;margin-left:10px;&#39; class=&#39;tfootRight&#39;>"+
          "<input placeholder=&#39;输入页码&#39; type=&#39;text&#39;>"+
          "<button>确定</button>"+
          "</p>"+
          "<p style=&#39;float:right&#39;>"+
            "<span class=&#39;firstPage&#39; style=&#39;margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;&#39;>首页</span>"+
            "<span class=&#39;lastPage&#39; style=&#39;margin-right:10px;cursor: pointer;float:left;display: none;&#39;>上一页</span>"+
            "<ul class=&#39;pagenumberBox&#39;>"+maxpagenumberBoxBigbox+"</ul>"+
            "<input class=&#39;typeNumber&#39; type=&#39;text&#39; value=&#39;1&#39; onfocus=&#39;this.blur()&#39; style=&#39;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;&#39;>"+
            "<span class=&#39;nextPage&#39; style=&#39;margin-right:10px;float:left;cursor: pointer;&#39;>下一页</span>"+
            "<span class=&#39;endPage&#39; style=&#39;cursor: pointer;float:left;&#39;>尾页</span>"+
          "</p>"+
          "<p style=&#39;float:right&#39;>"+
             "<select><option value=&#39;5&#39;>5</option><option value=&#39;10&#39;>10</option><option value=&#39;20&#39;>20</option><option value=&#39;50&#39;>50</option><option value=&#39;100&#39;>100</option><option value=&#39;200&#39;>200</option><option value=&#39;500&#39;>500</option></select>"
          "</p>"+
        "</p>"+
      "<td>"+
      "<tr>";
      _this.$element.html("<table class=&#39;CJJ-Table&#39;><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+ &#39; .endPage&#39;).hide();
        $(_this.$element.selector+ &#39; .nextPage&#39;).hide();
      }
      $(_this.$element.selector+ &#39; .tfootRight input&#39;).unbind(&#39;keyup&#39;).keyup(function(){
        _this.inputKeyup(_this,maxpagenumberBox,json);
      })
      $(_this.$element.selector+ &#39; .tfootRight button&#39;).unbind(&#39;click&#39;).click(function(){
         _this.button(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; .firstPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.firstPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; .endPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.endPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; .nextPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.nextPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; table tfoot ul li&#39;).unbind(&#39;click&#39;).click(function(){
         _this.nextTableLi(_this,maxpagenumberBox,json,$(this));
      });
      $(_this.$element.selector+ &#39; .lastPage&#39;).unbind(&#39;click&#39;).click(function(){
         _this.lastPage(_this,maxpagenumberBox,json);
      });
      $(_this.$element.selector+ &#39; select&#39;).unbind(&#39;change&#39;).change(function(){
         _this.select(_this,maxpagenumberBox,json,$(this));
      });
      $(_this.$element.selector+ &#39; tbody tr&#39;).unbind(&#39;dblclick&#39;).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=&#39;"+type+"&#39; style=&#39;display:"+display+"&#39;>"+json[i][type]+"</td>";
          bodyBigBox = bodyBox;
        }
        histroy_DD +="<tr class=&#39;new_productBox&#39;>"+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 += &#39;<li class="&#39;+className+&#39;">' + (i * 1 + 1) + '</li>';
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i < maxpagenumberBox; i++) {
          var className = "";
          if(i==0){
            className = "pagenumberBoxLi";
          }
          maxpagenumberBoxBig += &#39;<li class="&#39;+className+&#39;">' + (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 += &#39;<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 += &#39;<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 += &#39;<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);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Tunjukkan Lagi