Partage des méthodes de LayUI pour implémenter la fonction de pagination frontale

Cet article vous propose principalement une méthode pour implémenter la fonction de pagination frontale basée sur LayUI. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons 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.

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

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