LayUI implémente la fonction de pagination frontale

Cet article vous apporte principalement une méthode pour implémenter la fonction de pagination frontale basée sur LayUI. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Introduction à LayUI

Layui est un framework d'interface utilisateur frontal domestique écrit en utilisant ses propres spécifications de module. Il suit la forme d'écriture et d'organisation du seuil HTML/CSS/JS natif. est extrêmement faible. Utilisez-le Prêt à l’emploi. Cadre d'interface utilisateur intégré avec certains éléments et composants communs.

Après le téléchargement, importez-le dans le projet.

<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. Introduction aux paramètres LayPage

laypage est un objet encapsulé intégré, qui peut être appelé directement lors de la pagination. Il existe principalement les paramètres suivants pour la configuration de la valeur-clé de Laypage. collection de paires :

Valeur par défaut

键	默认值	类型	描述
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类，检测页面是否初始加载。非常有用，可避免无限刷新。

Clé

Type

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

Description

cont

Obligatoire Remplissez le

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

Points Nombre de pages

curr

1

Numéro

Page actuelle.

groupes

5

Nombre

Nombre de pages consécutives.

peau

par défaut

Chaîne

Contrôler l'apparence de la pagination

premier

1

Number/String/Boolean

est utilisé pour contrôler la page d'accueil. first : false, cela signifie ne pas afficher les éléments de la page d'accueil

last

Valeur totale de la page

Nombre/Chaîne/Booléen

Utilisé pour contrôler la dernière page. last : false, cela signifie que le dernier élément de la page n'est pas affiché

prev

Page précédente

Chaîne/Booléen

Utilisé pour contrôler la page précédente. S'il n'est pas affiché, définissez false

next

Page suivante

String/Boolean

pour contrôler la page suivante . S'il n'est pas affiché, définissez false

jump

Paramètres de base

Fonction

Rappel après déclenchement de la pagination, la fonction renvoie deux paramètres. obj est un type d'objet. Contient toutes les informations de configuration pour la pagination. D'abord une classe booléenne pour détecter si la page est initialement chargée. Très utile pour éviter les rafraîchissements infinis.

3. Implémentation de la pagination Affichez la page sur le front end, le code est le suivant : Paging L'effet est le suivant : Recommandations associées : Une façade très simple d'utilisation -classe d'outils js de pagination finale10 articles recommandés sur la pagination frontaleExemple de pagination frontale jQuery Sharing_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!