Explication détaillée de la différence entre la pagination LayUI et la pagination LayUI laypage-js tutoriel-php.cn

Explication détaillée de la différence entre la pagination LayUI et la pagination LayUI laypage

小云云

Libérer： 2018-05-30 09:16:35

original

8929 Les gens l'ont consulté

Cet article présente principalement les exemples d'utilisation basés sur la pagination LayUI et la pagination LayUI laypage. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Rendu :

1. Citer les dépendances js

Principalement jquery -1.11 .3.min.js et layui.all.js, json2.js est utilisé pour convertir des objets json

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>

Copier après la connexion

2. Encapsulation de la méthode de pagination js (la pagination utilise le modèle laytpl)

1. Rendu du modèle

/** 
 * 分页模板的渲染方法 
 * @param templateId 分页需要渲染的模板的id 
 * @param resultContentId 模板渲染后显示在页面的内容的容器id 
 * @param data 服务器返回的json对象 
 */ 
function renderTemplate(templateId, resultContentId, data){ 
  layuiuse([&#39;form&#39;,&#39;laytpl&#39;], function(){ 
    var laytpl = layui.laytpl; 
    laytpl($("#"+templateId).html()).render(data, function(html){ 
      $("#"+resultContentId).html(html); 
    }); 
  }); 
  layui.form().render();// 渲染 
};

Copier après la connexion

2. Package de pagination layui.laypage

/** 
 * layuilaypage 分页封装 
 * @param laypagepId 分页控件p层的id 
 * @param pageParams 分页的参数 
 * @param templateId 分页需要渲染的模板的id 
 * @param resultContentId 模板渲染后显示在页面的内容的容器id 
 * @param url 向服务器请求分页的url链接地址 
 */ 
function renderPageData(laypagepId, pageParams, templateId, resultContentId, url){ 
  if(isNull(pageParams)){ 
    pageParams = { 
      pageIndex : 1, 
      pageSize : 10 
    } 
  } 
  $ajax({ 
    url : url,//basePath + &#39;/sysMenu/pageSysMenu&#39;, 
    method : &#39;post&#39;, 
    data : pageParams,//JSON.stringify(datasub) 
    async : true, 
    complete : function (XHR, TS){}, 
    error : function(XMLHttpRequest, textStatus, errorThrown) { 
      if("error"==textStatus){ 
        error("服务器未响应，请稍候再试"); 
      }else{ 
        error("操作失败，textStatus="+textStatus); 
      } 
    }, 
    success : function(data) { 
      var jsonObj; 
      if(&#39;object&#39; == typeof data){ 
        jsonObj = data; 
      }else{ 
        jsonObj = JSON.parse(data); 
      } 
      renderTemplate(templateId, resultContentId, jsonObj); 
       
      //重新初始化分页插件 
      layui.use([&#39;form&#39;,&#39;laypage&#39;], function(){ 
        laypage = layui.laypage; 
        laypage({ 
          cont : laypagepId, 
          curr : jsonObj.pager.pageIndex, 
          pages : jsonObj.pager.totalPage, 
          skip : true, 
          jump: function(obj, first){//obj是一个object类型。包括了分页的所有配置信息。first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。 
            pageParams.pageIndex = obj.curr; 
            pageParams.pageSize = jsonObj.pager.pageSize; 
            if(!first){ 
              renderPageData(laypagepId, pageParams, templateId, resultContentId, url); 
            } 
          } 
        }); 
      }); 
    } 
  }); 
};

Copier après la connexion

3. La méthode de rafraîchissement de la pagination actuelle peut être omise

/** 
 * 分页插件刷新当前页的数据，必须有跳转的确定按钮，因为根据按钮点击事件刷新 
 */ 
function reloadCurrentPage(){ 
  $(".layui-laypage-btn").click(); 
};

Copier après la connexion

3. Code de page

1. Table de pagination et contrôle de pagination

<!-- 分页表格 --> 
<p class="layui-form"> 
 <table class="layui-table"> 
  <thead> 
   <tr> 
    <th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th> 
   <th class="w200">许可名称</th> 
   <th class="w200">许可编码</th> 
   <th class="w200">菜单名称</th> 
   <th>许可链接</th> 
  </tr>  
   </thead> 
   <tbody id="page_template_body_id"> 
  </tbody> 
 </table> 
</p> 
<!-- 分页控件p -->    
<p id="imovie-page-p"></p>

Copier après la connexion

2. 3. Code d'exécution de pagination :

<script id="page_template_id" type="text/html"> 
{{# layui.each(d.list, function(index, item){ }} 
<tr> 
  <td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td> 
  <td>{{item.permissionName || &#39;&#39;}}</td> 
  <td>{{item.permissionCode || &#39;&#39;}}</td> 
  <td>{{item.menuName || &#39;&#39;}}</td> 
  <td>{{item.permissionUrl || &#39;&#39;}}</td> 
</tr> 
{{# }); }} 
</script>

Copier après la connexion

Paramètres de pagination :

Méthode d'exécution de pagination :

function getPageParams(){ 
  var pageParams = { 
  pageIndex : 1, 
  pageSize : 2 
  }; 
  pageParams.permissionName = $("input[name=&#39;permissionName&#39;]").val(); 
  pageParams.permissionCode = $("input[name=&#39;permissionCode&#39;]").val(); 
  pageParams.menuName = $("input[name=&#39;menuName&#39;]").val(); 
  return pageParams; 
};

Copier après la connexion

Page de pagination d'initialisation de chargement :

function initPage(){ 
  renderPageData("imovie-page-p", getPageParams(), "page_template_id",  
      "page_template_body_id", basePath + &#39;/sysPermission/pageSysPermission&#39;); 
};

Copier après la connexion

Si vous incluez la requête pour le rendu ci-dessus, elle se présente comme suit :

$(function(){ 
  initPage(); 
});

Copier après la connexion

Code de la page HTML

Instruction de requête :

<p> 
      <form class="layui-form layui-form-pane"> 
        <p class="layui-form-item"> 
          <p class="layui-inline"> 
            <label class="layui-form-label">许可名称</label> 
            <p class="layui-input-inline"> 
              <input type="text" name="permissionName"  
                autocomplete="off" class="layui-input" placeholder="请输入许可名称" > 
            </p> 
          </p> 
          <p class="layui-inline"> 
            <label class="layui-form-label">许可编码</label> 
            <p class="layui-input-inline"> 
              <input type="text" name="permissionCode"  
                autocomplete="off" placeholder="请输入许可编码" class="layui-input"> 
            </p> 
          </p> 
          <p class="layui-inline"> 
            <label class="layui-form-label">菜单名称</label> 
            <p class="layui-input-inline layui-input-inline-0"> 
              <input type="text" name="menuName"  
                autocomplete="off" placeholder="请选择菜单名称" class="layui-input"> 
               
            </p> 
          </p> 
          <p class="layui-inline"> 
            <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查询</button> 
          </p> 
        </p> 
      </form> 
    </p>

Copier après la connexion

Recommandations associées :

$(function(){ 
  initPage(); 
   
  layui.use([&#39;form&#39;], function(){ 
    var form = layui.form(); 
    //监听提交 
    formon(&#39;submit(formFilter)&#39;, function(data){ 
      initPage(); 
      return false; 
    }); 
      
      
  }); 
});

Copier après la connexion

Partage de code d'implémentation de l'effet de pagination Layui

Analyse d'instance de classe de pagination PHP

Explication détaillée de jQuery composant de pagination encapsulé

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!