recherche

Maison  >  Article  >  interface Web  >  Comment implémenter la pagination dynamique des données avec jQuery+ajax

Comment implémenter la pagination dynamique des données avec jQuery+ajax

php中世界最好的语言
php中世界最好的语言original
2018-03-15 13:19:231978parcourir

Cette fois, je vais vous montrer comment implémenter la pagination dynamique des données avec jQuery + ajax. Quelles sont les précautions pour utiliser jQuery + ajax pour implémenter la pagination dynamique des données. Ce qui suit est un cas pratique, prenons. un regard.

Utilisez jQuery pour obtenir l'effet de pagination dynamique des données par saut de numéro de page. L'effet le plus évident de cet effet est qu'il n'y a pas de processus de chargement de données et d'actualisation de page. Il est également très efficace lors du chargement de petites données et. chargement de pages Web à plusieurs niveaux.

Ci-dessous nous donnons tous les codes d'effet :

Code HTML complet : 

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

où < ;script type="text/javascript" src="js/shujv2.js"> est le contenu des données JS Pendant le fonctionnement réel, vous pouvez utiliser JS pour obtenir le format de données souhaité :

code 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.jsOui L'effet du chargement de la pagination est réalisé. Le code est : 

;(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);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

HTML+CSS+jQuery pour réaliser l'image publicitaire du carrousel

html+css+jquery pour réaliser l'étage effet de défilement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment extraire l'affectation de données avec ajax dans jQueryArticle suivant：Comment extraire l'affectation de données avec ajax dans jQuery

Articles Liés

Voir plus