Teilen der LayUI-Methoden zur Implementierung der Front-End-Paging-Funktion

Dieser Artikel stellt Ihnen hauptsächlich eine Methode zum Implementieren der Front-End-Paging-Funktion basierend auf LayUI vor. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Einführung in LayUI

Layui ist ein inländisches Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde. Es folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS ist extrem niedrig. Gebrauchsfertig. Integriertes UI-Framework mit einigen gemeinsamen Elementen und Komponenten.

Die Download-Adresse lautet http://www.layui.com/ und importiert sie nach dem Herunterladen in das Projekt.

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="external nofollow" >
<script src="${pageContext.request.contextPath}/js/layui.js" ></script>

2. Einführung in LayPage-Parameter

laypage ist ein integriertes gekapseltes Objekt, das beim Paging direkt aufgerufen werden kann. Es gibt hauptsächlich die folgenden Parameter für die Konfiguration des Laypage-Schlüsselwerts Paarsammlung:

<script>
 var pcountString= "${pcount}";
 var psizeString= "${psize}";
 var pcountInt= parseInt(pcountString);//总页数
 var psizeInt=parseInt(psizeString); //页面大小
 var pindex = "${pindex}";// 当前页
 var ptotalpages=Math.ceil(pcountInt/psizeInt);// 总记录数
 layui.define(['layer', 'laypage' ], function(exports) {
  var layer = layui.layer;
  var laypage = layui.laypage;
  var pcount = pcountInt;// 总记录数
  var psize = psizeInt;// 每一页的记录数
  // 分页
  laypage({
   cont : 'pagination', // 页面上的id
   pages : ptotalpages,//总页数
   curr : pindex,//当前页
   skin: '#999999',//颜色
   jump : function(obj, first) {
    if (!first) {
     var parId=$("#parId").val();
     var pindex=obj.curr;
    window.location.href="${ctx}/web/rest/RecycleManage/GetFileList?parId=" rel="external nofollow" +parId+"&pindex="+pindex;//跳转链接
    }
   }
  });
 });
</script>

Das obige ist der detaillierte Inhalt vonTeilen der LayUI-Methoden zur Implementierung der Front-End-Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!