Detaillierte Erläuterung der Beispiele für Layer-Paginatoren in jQuery-js-Tutorial-php.cn

Detaillierte Erläuterung der Beispiele für Layer-Paginatoren in jQuery

小云云

Freigeben： 2018-01-22 16:29:10

Original

2187 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von Layer-Paging in jQuery vorgestellt. Es ist von großem praktischem Wert. Ich hoffe, es kann jedem helfen.

layui stellt uns die Paging-Komponente zur Verfügung, und durch einfache Konfiguration kann der Paging-Effekt erzeugt werden

Der obige Code:

// 点击查询按钮 开始显示表格内容
// 如果查询内容不存在 则显示为空
$(&#39;#searchBtn&#39;).click(function(){
  var html = &#39;&#39;;
  $.ajax({
    type:"GET",
    url:"data/tsResult.json",
    success:function(TS){
      // 拿到投诉案件数据
      // 分页器
      layui.use([&#39;laypage&#39;,&#39;layer&#39;],function(){
        var laypage = layui.laypage,
        layer = layui.layer;

        var num = 7;//每一页出现的数据量
        // 模拟渲染
        var render = function(curr){//当前页
          var html = &#39;&#39;,
            last = curr*num-1;//当前页的最后一行数据的下标
            last = last >= TS.length?(TS.length-1):last;
            for(var i=(curr*num-num); i<=last; i++){
              // 从未显示的第一行开始
              html += &#39;<tr>&#39;+
                    &#39;<td width="4%">&#39;+TS[i].id+&#39;</td>&#39;+
                    &#39;<td width="8%">&#39;+TS[i].COMPNAME+&#39;</td>&#39;+
                    &#39;<td width="12%">&#39;+TS[i].COMTELPHONE+&#39;</td>&#39;+
                    &#39;<td width="16%">&#39;+TS[i].COMPCARD+&#39;</td>&#39;+
                    &#39;<td width="8%">&#39;+TS[i].DJRQ_S+&#39;</td>&#39;+
                    &#39;<td width="8%">&#39;+TS[i].COMTYPE+&#39;</td>&#39;+
                    &#39;<td width="28%">&#39;+TS[i].COMCONTEXT+&#39;</td>&#39;+
                    &#39;<td width="8%">&#39;+TS[i].STATE+&#39;</td>&#39;+
                    &#39;<td width="8%" style="text-align:center;"><button class="layui-btn doBtn">&#39;+TS[i].btn+&#39;</button></td>&#39;+
                  &#39;</tr>&#39;;
            }
            return html;
        };

        laypage({
          cont:&#39;demo4&#39;,
          pages:Math.ceil(TS.length/num),
          first:false,
          last: false,
          jump:function(obj){
            document.getElementById(&#39;TS-list&#39;).innerHTML = render(obj.curr);
          }
        });
      });
    }
  });
});

Nach dem Login kopieren

Erklären Sie den Code hier ein wenig:

1. Klicken Sie auf die Schaltfläche #searchBtn, um eine Ajax-Anfrage zu starten, um die Daten zu erhalten, die ausgelagert werden müssen.

2. Nach Erfolg wird der Rückruf ausgeführt, um Paging + Splicing durchzuführen.

3. Erforderlicher Code

layui.use([&#39;laypage&#39;,&#39;layer&#39;],function(){
        var laypage = layui.laypage,
        layer = layui.layer;
        }

Nach dem Login kopieren

4. Definieren Sie die Anzahl der Elemente, die auf einer Seite angezeigt werden sollen, und definieren Sie die Rendermethode und führen Sie ein simuliertes Rendering durch.

5. Jump-Implementierung

Der obige Code kann direkt verwendet werden, Sie müssen nur das Objekt ändern.

Verwandte Empfehlungen:

Beispielcode-Sharing des PHP-Rewriting-Pagers CLinkPager

Javascript – Novice imitiert SGs Paging im Projekt Device Please Gib mir einen Rat

JQuerys Pager-Implementierung code_jquery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für Layer-Paginatoren in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!