Utilisez LayUI pour implémenter la fonction de pagination frontale-Tutoriel Layui-php.cn

Utilisez LayUI pour implémenter la fonction de pagination frontale

尚

Libérer： 2020-06-17 16:49:16

avant

4143 Les gens l'ont consulté

1. Introduction à LayUI

Layui est un framework d'interface utilisateur frontal domestique écrit avec ses propres spécifications de module, suivant la forme d'écriture et d'organisation du HTML/CSS natif. /JS Le seuil est extrêmement bas et vous pouvez l'utiliser dès la sortie de la boîte. Cadre d'interface utilisateur intégré avec certains éléments et composants communs.

L'adresse de téléchargement est http://www.layui.com/, et importez-la dans le projet après le téléchargement.

<link>
<script></script>

Copier après la connexion

2. Introduction aux paramètres LayPage

aypage est un objet encapsulé intégré, qui peut être appelé directement lors de la pagination. Il y a principalement les paramètres suivants ici pour configurer la clé. -ensemble de paires de valeurs de la page de mise en page :

Clés	Valeur par défaut	Type	description
suite	Obligatoire	Chaîne/Objet	Conteneur. La valeur peut être transmise dans l'identifiant de l'élément ou dans le DOM natif ou l'objet jquery
pages	Obligatoire	Nombre	Nombre de pages
curr	1	Numéro	Page actuelle.
groupes	5	Nombre	Le nombre de sauts de page consécutifs.
peau	par défaut	Chaîne	Contrôler l'apparence de la pagination
premier	1	Numéro/Chaîne/ Booléen	est utilisé pour contrôler la page d'accueil. premier : faux, cela signifie que l'élément de la page d'accueil
dernier	Valeur totale de la page	Nombre/Chaîne/Booléen	pour le contrôle Dernière page. last : faux, cela signifie que le dernier élément de la page
prev	Page précédente	String/Boolean	est utilisé pour le contrôle One page. S'il n'est pas affiché, définissez false sur
suivant	Page suivante	String/Boolean	用于控制下一页。若不显示，设置false即可
jump	核心参数	Function	触发分页后的回调，函数返回两个参数。 obj是一个object类型。包括了分页的所有配置信息。 first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。

三、分页实现

在前端展示页面，代码如下：

<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([&#39;layer&#39;, &#39;laypage&#39; ], function(exports) {       var layer = layui.layer;       var laypage = layui.laypage;       var pcount = pcountInt;// 总记录数
       var psize = psizeInt;// 每一页的记录数
       // 分页       laypage({
           cont : &#39;pagination&#39;, // 页面上的id
           pages : ptotalpages,//总页数
           curr : pindex,//当前页
           skin: &#39;#999999&#39;,//颜色
           jump : function(obj, first) {               if (!first) {                   var parId=$("#parId").val();                   var pindex=obj.curr;
                window.location.href="${ctx}/web/rest/RecycleManage/GetFileList?parId="+parId+"&pindex="+pindex;//跳转链接               }
           }
       });
   });</script>

Copier après la connexion

分页效果如下：

Utilisez LayUI pour implémenter la fonction de pagination frontale