Explication détaillée des exemples de paginateur de couches dans jQuery-js tutoriel-php.cn

Explication détaillée des exemples de paginateur de couches dans jQuery

小云云

Libérer： 2018-01-22 16:29:10

original

2184 Les gens l'ont consulté

Cet article présente principalement l'utilisation de la pagination par couches dans jQuery. Les exemples présentent les techniques de pagination par couches. Il est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer.

layui nous fournit le composant de pagination, et une configuration simple peut créer l'effet de pagination

Le code ci-dessus :

// 点击查询按钮 开始显示表格内容
// 如果查询内容不存在 则显示为空
$(&#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);
          }
        });
      });
    }
  });
});

Copier après la connexion

Expliquez un peu le code ici :

1. Cliquez sur le bouton #searchBtn pour lancer une requête ajax afin d'obtenir les données qui doivent être paginées.

2. Après succès, le rappel est exécuté pour effectuer la pagination + l'épissage.

3. Code requis

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

Copier après la connexion

4. Définir le nombre d'éléments à afficher sur une page, définir la méthode de rendu. et effectuez un rendu simulé.

5. Implémentation du saut

Le code ci-dessus peut être utilisé directement, il vous suffit de modifier l'objet.

Recommandations associées :

Exemple de partage de code du pager de réécriture PHP CLinkPager

javascript - Novice imite la pagination de sg dans le projet Device Please. donnez-moi quelques conseils

Code_jquery d'implémentation du Pager de JQuery

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!