Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2017-12-31 16:20:05
Original
3487 Leute haben es durchsucht

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>
Nach dem Login kopieren

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:

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>
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 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 Paging auslösen, 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: Vuejs' Idee, lokale Daten zu implementieren Filter- und Paging-FunktionSo verwenden Sie PHP, um die Listen-Paging-Funktion zu implementierenthinkPHP5 verwendet das Laypage-Paging-Plug-in, um die Listen-Paging-Funktion_php zu implementieren Beispiel

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!