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
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>Nach dem Login kopieren |
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. |
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
