LayUI implementiert die 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 werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. 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.

Nach dem Herunterladen importieren Sie es 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 von Laypage-Schlüsselwerten Paarsammlung:

Standardwert

键	默认值	类型	描述
cont	必填	String/Object	容器。值可以传入元素id或原生DOM或jquery对象
pages	必填	Number	分页数
curr	1	Number	当前页。
groups	5	Number	连续分页数。
skin	default	String	控制分页皮肤
first	1	Number/String/Boolean	用于控制首页。first: false，则表示不显示首页项
last	总页数值	Number/String/Boolean	用于控制尾页。last: false，则表示不显示尾页项
prev	上一页	String/Boolean	用于控制上一页。若不显示，设置false即可
next	下一页	String/Boolean	用于控制下一页。若不显示，设置false即可
jump	核心参数	Function	触发分页后的回调，函数返回两个参数。 obj是一个object类型。包括了分页的所有配置信息。 first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。

Key

Typ

<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>

Beschreibung

cont

Erforderlich Füllen Sie das

String/Object

Container. Der Wert kann in der Element-ID oder im nativen DOM oder im JQuery-Objekt

pages

Erforderlich

Anzahl

Punkte Anzahl der Seiten

aktuell

1

Nummer

Aktuelle Seite.

Gruppen

5

Anzahl

Anzahl aufeinanderfolgender Seiten.

Skin

Standard

String

Paging-Skin steuern

zuerst

1

wird zur Steuerung der Homepage verwendet. Erstens: falsch, es bedeutet, dass die Homepage-Elemente nicht angezeigt werden

letzte

Gesamtseitenwert

Zahl/String/Boolescher Wert

Wird zur Steuerung der letzten Seite verwendet. last: false, das bedeutet, dass das letzte Seitenelement nicht angezeigt wird

prev

Vorherige Seite

String/Boolean

Wird zur Steuerung der vorherigen Seite verwendet. Wenn nicht angezeigt, setzen Sie false

next

Nächste Seite

String/Boolean

zur Steuerung der nächsten Seite . Wenn es nicht angezeigt wird, setzen Sie false

jump

Kernparameter

Funktion

Rückruf nach Auslösen des Pagings, Die Funktion gibt zwei Parameter zurück. obj ist ein Objekttyp. Enthält alle Konfigurationsinformationen für Paging. Zuerst eine boolesche Klasse, um zu erkennen, ob die Seite ursprünglich geladen wurde. Sehr nützlich, um endlose Aktualisierungen zu vermeiden.

3. Paging-Implementierung Zeigen Sie die Seite im Frontend an. Der Code lautet wie folgt: Paging Der Effekt ist wie folgt: Verwandte Empfehlungen: Eine sehr einfach zu bedienende Front -End-Paging-JS-Tool-Klasse10 empfohlene Artikel über Front-End-PagingjQuery-Front-End-Paging-Beispiel „sharing_jquery“

Das obige ist der detaillierte Inhalt vonLayUI implementiert die Front-End-Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!