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 :

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

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!