Comment implémenter la pagination dynamique des données dans jQuery-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment implémenter la pagination dynamique des données dans jQuery

Jun 14, 2018 pm 03:22 PM

jquery

Cet article vous apprend à utiliser jQuery pour implémenter une pagination dynamique des données avec des sauts de numéro de page. L'effet est très bon et il n'y a pas d'actualisation de page. Les amis qui en ont besoin peuvent l'apprendre.

Ce que nous vous proposons cette fois, c'est d'utiliser jQuery pour réaliser 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 la page. Il est également facile de charger de petites données. Très efficace lors du chargement de pages Web à plusieurs niveaux. Jetons d'abord un coup d'œil à l'effet réel :

Ci-dessous, nous donnons le code complet de l'effet :

Code HTML complet :

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

Copier après la connexion

Parmi eux, <script type="text/javascript" src="js/shujv2.js"></script> vous l'utilisez réellement, vous pouvez utiliser JS pour obtenir json afin d'obtenir le format de données souhaité :

code shujv2.js :

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

Copier après la connexion

front -endPage.js est l'implémentation de l'effet de chargement de pagination. 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=&quot;&quot;;
      var titlesmall=&quot;&quot;;
      for(var i=0;i&lt;_this.options.title.length;i++){
        titlesmall+=&quot;&lt;th&gt;&quot;+_this.options.title[i]+&quot;&lt;/th&gt;&quot;;
        titlelistBox = titlesmall;
      }
      var json = &quot;&quot;;
      var maxpagenumberBox = 7;//选择项最多的数量
      var json = this.options.url;
      var histroy_DDBox = &quot;&quot;;
      var histroy_DD = &quot;&quot;;
      var firstPageNumber=_this.options.pageLength&gt;_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;
      for (var i = 0; i &lt;firstPageNumber; i++) {
        var bodyBigBox=&quot;&quot;;
        var bodyBox=&quot;&quot;;
        for(var x=0;x&lt;_this.options.body.length;x++){
          var type = _this.options.body[x];
          var display = &quot;table-cell&quot;;
          if(_this.options.body.length&gt;_this.options.title.length&amp;&amp;_this.options.display[x]!=undefined){
            display = _this.options.display[x]*1==1?&quot;table-cell&quot;:&quot;none&quot;;
          }
          bodyBox+=&quot;&lt;td class=&#39;&quot;+type+&quot;&#39; style=&#39;display:&quot;+display+&quot;&#39;&gt;&quot;+json[i][type]+&quot;&lt;/td&gt;&quot;;
          bodyBigBox = bodyBox;
        }
        histroy_DD +=&quot;&lt;tr class=&#39;new_productBox&#39;&gt;&quot;+bodyBigBox+&quot;&lt;/tr&gt;&quot;;
        histroy_DDBox = histroy_DD;
      }
      $( _this.$element.selector+&quot; table tfoot&quot;).html(&quot;&quot;);
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {
        $( _this.$element.selector+&quot; .nextPage&quot;).css(&quot;display&quot;, &quot;none&quot;);
        $(_this.$element.selector+&quot; .endPage&quot;).css(&quot;display&quot;, &quot;none&quot;);
      }
      var maxpagenumberBoxBigbox = &quot;&quot;;
      var maxpagenumberBoxBig = &quot;&quot;;
      if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) &lt; maxpagenumberBox) {
        for (var i = 0; i &lt; Math.ceil(_this.options.pageLength/ _this.options.pageNUmber); i++) {
          var className = &quot;&quot;;
          if(i==0){
            className = &quot;pagenumberBoxLi&quot;;
          }
          maxpagenumberBoxBig += &#39;&lt;li class=&quot;&#39;+className+&#39;&quot;&gt;&#39; + (i * 1 + 1) + &#39;&lt;/li&gt;&#39;;
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i &lt; maxpagenumberBox; i++) {
          var className = &quot;&quot;;
          if(i==0){
            className = &quot;pagenumberBoxLi&quot;;
          }
          maxpagenumberBoxBig += &#39;&lt;li class=&quot;&#39;+className+&#39;&quot;&gt;&#39; + (i * 1 + 1) + &#39;&lt;/li&gt;&#39;;
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      var buttonTfoot = &quot;&lt;tr&gt;&quot;+
      &quot;&lt;td colspan=&#39;&quot;+_this.options.title.length+&quot;&#39;&gt;&quot;+
        &quot;&lt;p style=&#39;float:right;margin-left:10px;&#39; class=&#39;tfootRight&#39;&gt;&quot;+
          &quot;&lt;input placeholder=&#39;输入页码&#39; type=&#39;text&#39;&gt;&quot;+
          &quot;&lt;button&gt;确定&lt;/button&gt;&quot;+
          &quot;&lt;/p&gt;&quot;+
          &quot;&lt;p style=&#39;float:right&#39;&gt;&quot;+
            &quot;&lt;span class=&#39;firstPage&#39; style=&#39;margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;&#39;&gt;首页&lt;/span&gt;&quot;+
            &quot;&lt;span class=&#39;lastPage&#39; style=&#39;margin-right:10px;cursor: pointer;float:left;display: none;&#39;&gt;上一页&lt;/span&gt;&quot;+
            &quot;&lt;ul class=&#39;pagenumberBox&#39;&gt;&quot;+maxpagenumberBoxBigbox+&quot;&lt;/ul&gt;&quot;+
            &quot;&lt;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;&gt;&quot;+
            &quot;&lt;span class=&#39;nextPage&#39; style=&#39;margin-right:10px;float:left;cursor: pointer;&#39;&gt;下一页&lt;/span&gt;&quot;+
            &quot;&lt;span class=&#39;endPage&#39; style=&#39;cursor: pointer;float:left;&#39;&gt;尾页&lt;/span&gt;&quot;+
          &quot;&lt;/p&gt;&quot;+
          &quot;&lt;p style=&#39;float:right&#39;&gt;&quot;+
             &quot;&lt;select&gt;&lt;option value=&#39;5&#39;&gt;5&lt;/option&gt;&lt;option value=&#39;10&#39;&gt;10&lt;/option&gt;&lt;option value=&#39;20&#39;&gt;20&lt;/option&gt;&lt;option value=&#39;50&#39;&gt;50&lt;/option&gt;&lt;option value=&#39;100&#39;&gt;100&lt;/option&gt;&lt;option value=&#39;200&#39;&gt;200&lt;/option&gt;&lt;option value=&#39;500&#39;&gt;500&lt;/option&gt;&lt;/select&gt;&quot;
          &quot;&lt;/p&gt;&quot;+
        &quot;&lt;/p&gt;&quot;+
      &quot;&lt;td&gt;&quot;+
      &quot;&lt;tr&gt;&quot;;
      _this.$element.html(&quot;&lt;table class=&#39;CJJ-Table&#39;&gt;&lt;thead&gt;&quot;+titlelistBox+&quot;&lt;/thead&gt;&lt;tbody&gt;&quot;+histroy_DDBox+&quot;&lt;/tbody&gt;&lt;tfoot&gt;&quot;+buttonTfoot+&quot;&lt;/tfoot&gt;&lt;/table&gt;&quot;);
      $(_this.$element.selector+ &#39; select&#39;).val(_this.options.pageNUmber);
      if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber)&lt;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+ &quot; .tfootRight input&quot;).val();
      if (val == 0) {
        var val2 = val.replace(0, &quot;&quot;);
      } else if (val &gt; 0 &amp;&amp; val &lt;= Math.ceil(e.options.pageLength / e.options.pageNUmber)) {
        var val2 = val.replace(/[^0-9]/g, &quot;&quot;);
      } else if (val &gt; Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {
        var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);
      }
      $(e.$element.selector+ &#39; .tfootRight input&#39;).val(val2);
    },
    button:function(e,maxpagenumberBox,json){
      var val = $(e.$element.selector+ &#39; .tfootRight input&#39;).val();
      $(e.$element.selector+ &quot; .typeNumber&quot;).val(val);
      if (val != &quot;&quot;) {
        e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    firstPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ &quot; .typeNumber&quot;).val(1);
      e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    endPage:function(e,maxpagenumberBox,json){
      $(e.$element.selector+ &quot; .typeNumber&quot;).val(Math.ceil(e.options.pageLength / e.options.pageNUmber));
      e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    nextPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ &quot; .typeNumber&quot;).val();
      $(e.$element.selector+ &quot; .typeNumber&quot;).val(number * 1 + 1);
      e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
  
    },
    nextTableLi:function(e,maxpagenumberBox,json,that){
      var val = that.html();
      $(e.$element.selector+ &quot; .typeNumber&quot;).val(val);
      e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    lastPage:function(e,maxpagenumberBox,json){
      var number = $(e.$element.selector+ &quot; .typeNumber&quot;).val();
      if (number &gt; 1) {
        $(e.$element.selector+ &quot; .typeNumber&quot;).val(number * 1 - 1);
        e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
      }
    },
    select:function(e,maxpagenumberBox,json,that){
      var select = that.find(&quot;option:selected&quot;).val();
      $(e.$element.selector+ &quot; .typeNumber&quot;).val(1); 
      e.options.pageNUmber = select;
      e.page($(e.$element.selector+ &quot; .typeNumber&quot;).val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
    },
    page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {
      var histroy_DDBox = &quot;&quot;;
      var histroy_DD = &quot;&quot;;
      var lastPage=Pagenumber&lt;Math.ceil(e.options.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength;
      for (var i =(Pagenumber-1)*pageNUmber; i &lt; lastPage; i++) {
        var bodyBigBox=&quot;&quot;;
        var bodyBox=&quot;&quot;;
        for(var x=0;x&lt;e.options.body.length;x++){
          var type = e.options.body[x];
          var display = &quot;table-cell&quot;;
          if(e.options.body.length&gt;e.options.title.length&amp;&amp;e.options.display[x]!=undefined){
            display = e.options.display[x]*1==1?&quot;table-cell&quot;:&quot;none&quot;;
          }
          bodyBox+=&quot;&lt;td class=&#39;&quot;+type+&quot;&#39; style=&#39;display:&quot;+display+&quot;&#39;&gt;&quot;+json[i][type]+&quot;&lt;/td&gt;&quot;;
          bodyBigBox = bodyBox;
        }
        histroy_DD +=&quot;&lt;tr class=&#39;new_productBox&#39;&gt;&quot;+bodyBigBox+&quot;&lt;/tr&gt;&quot;;
        histroy_DDBox = histroy_DD;
      }
      $(that.selector+&quot; table tbody&quot;).html(histroy_DD);
      var maxpagenumberBoxBigbox = &quot;&quot;;
      var maxpagenumberBoxBig = &quot;&quot;;
      if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) &lt; maxpagenumberBox) {
        for (var i = 0; i &lt; Math.ceil(e.options.pageLength/ e.options.pageNUmber); i++) {
          var className = &quot;&quot;;
          if(i==0){
            className = &quot;pagenumberBoxLi&quot;;
          }
          maxpagenumberBoxBig += &#39;&lt;li class=&quot;&#39;+className+&#39;&quot;&gt;&#39; + (i * 1 + 1) + &#39;&lt;/li&gt;&#39;;
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      } else {
        for (var i = 0; i &lt; maxpagenumberBox; i++) {
          var className = &quot;&quot;;
          if(i==0){
            className = &quot;pagenumberBoxLi&quot;;
          }
          maxpagenumberBoxBig += &#39;&lt;li class=&quot;&#39;+className+&#39;&quot;&gt;&#39; + (i * 1 + 1) + &#39;&lt;/li&gt;&#39;;
          maxpagenumberBoxBigbox = maxpagenumberBoxBig;
        }
      }
      $(that.selector+&quot; table tfoot ul&quot;).html(maxpagenumberBoxBigbox);
      if (Pagenumber == 1) {
        $(that.selector+&quot; .firstPage,&quot;+that.selector+&quot; .lastPage&quot;).hide();
      } else {
        $(that.selector+&quot; .firstPage,&quot;+that.selector+&quot; .lastPage&quot;).show();
      }
      if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {
        $(that.selector+&quot; .endPage,&quot;+that.selector+&quot; .nextPage&quot;).hide();
      } else {
        $(that.selector+&quot; .endPage,&quot;+that.selector+&quot; .nextPage&quot;).show();
      }
      if (Math.ceil(e.options.pageLength/ pageNUmber) &gt; maxpagenumberBox) {
        if (Pagenumber &gt; 0 &amp;&amp; Pagenumber &lt; Math.ceil(maxpagenumberBox / 2) * 1 + 1) {
          maxpagenumberBoxBigbox = &quot;&quot;;
          maxpagenumberBoxBig = &quot;&quot;;
          for (var i = 0; i &lt; maxpagenumberBox; i++) {
            maxpagenumberBoxBig += &#39;&lt;li&gt;&#39; + (i * 1 + 1) + &#39;&lt;/li&gt;&#39;;
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+&quot; .pagenumberBox&quot;).html(maxpagenumberBoxBigbox);
          $(that.selector+&#39; .pagenumberBox li&#39;).eq(Pagenumber - 1).addClass(&#39;pagenumberBoxLi&#39;);
        } else if (Pagenumber &gt;= Math.ceil(maxpagenumberBox / 2) * 1 + 1 &amp;&amp; Pagenumber &lt; Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2) {
          maxpagenumberBoxBigbox = &quot;&quot;;
          maxpagenumberBoxBig = &quot;&quot;;
          for (var i = Pagenumber - Math.ceil(maxpagenumberBox / 2) + 1; i &lt; Pagenumber * 1 + Math.ceil(maxpagenumberBox / 2) * 1; i++) {
            maxpagenumberBoxBig += &#39;&lt;li&gt;&#39; + (i) + &#39;&lt;/li&gt;&#39;;
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+&quot; .pagenumberBox&quot;).html(maxpagenumberBoxBigbox);
          $(that.selector+&#39; .pagenumberBox li&#39;).eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass(&#39;pagenumberBoxLi&#39;);
        } else if (Pagenumber &gt;= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 &amp;&amp; Pagenumber &lt;= Math.ceil(e.options.pageLength / pageNUmber)) {
          maxpagenumberBoxBigbox = &quot;&quot;;
          maxpagenumberBoxBig = &quot;&quot;;
          for (var i = Math.ceil(e.options.pageLength / pageNUmber) - maxpagenumberBox; i &lt; Math.ceil(e.options.pageLength / pageNUmber); i++) {
            maxpagenumberBoxBig += &#39;&lt;li&gt;&#39; + (i * 1 + 1) + &#39;&lt;/li&gt;&#39;;
            maxpagenumberBoxBigbox = maxpagenumberBoxBig;
          }
          $(that.selector+&quot; .pagenumberBox&quot;).html(maxpagenumberBoxBigbox);
          $(that.selector+&#39; .pagenumberBox li&#39;).eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass(&#39;pagenumberBoxLi&#39;);
        }
      } else {
        if (Pagenumber &lt;= Math.ceil(e.options.pageLength / pageNUmber)) {
          $(that.selector+&#39; .pagenumberBox li&#39;).removeClass(&#39;pagenumberBoxLi&#39;);
          $(that.selector+&#39; .pagenumberBox li&#39;).eq(Pagenumber - 1).addClass(&#39;pagenumberBoxLi&#39;);
        }
      }
      $(that.selector+ &#39; table tfoot ul li&#39;).unbind(&#39;click&#39;).click(function(){
         e.nextTableLi(e,maxpagenumberBox,json,$(this));
      });
      $(that.selector+ &#39; tbody tr&#39;).unbind(&#39;dblclick&#39;).dblclick(function(){
         e.options.dbTrclick($(this));
      });
    }  

 }
 $.fn.CJJTable = function(options){
     var cjj = new cjjTable(this,options);
     return cjj.start();
 }
})(jQuery, window, document);

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comment télécharger et compresser des images en js (tutoriel détaillé)

Comment implémenter la transition CSS à l'aide de vue Effect

Comment utiliser l'applet WeChat pour implémenter la fonction de téléchargement d'images

Quelles sont les méthodes de transmission des paramètres à l'aide de l'applet WeChat ?

Comment écrire des composants de formulaire à l'aide de async-validator (tutoriel détaillé)

Comment implémenter le contraste des pixels à l'aide de casperjs et similar.js (détaillé tutoriel)

Comment implémenter le tri rapide à l'aide de JavaScript (tutoriel détaillé)

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 de ce site Web

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