Partage d'utilisation du plug-in de pagination twbsPagination.js

Cet article vous apporte principalement une expérience (partage) basée sur l'utilisation du plug-in de pagination twbsPagination.js. 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.

Le projet nécessitait auparavant un plug-in de pagination. Dans le passé, un plug-in simplement appelé pagenation.js était utilisé. Cependant, lors de cette intégration, un enfant de l'équipe du projet a utilisé ce plug-in et. J'y ai réfléchi sur la base d'exemples en ligne. En fait, le processus général est le même. Je partage principalement certaines de mes expériences d'utilisation de ce plug-in de pagination :

1 Pour introduire le plug-in de pagination dans HTML, vous avez besoin de : <.>

bootstrap .css

Plug-in de pagination js

Css de style de pagination écrit par vous-même [Sinon, vous pouvez également utiliser directement le css de pagination fourni par bootstrap. 】

En utilisant jquery, vous pouvez importer jquery.js

html :

<script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>
<link rel="stylesheet" href="<c:url value=" rel="external nofollow" rel="external nofollow" /content/common/css/bootstrap.min.css"/>" />
<link rel="stylesheet" href="<c:url value=" rel="external nofollow" rel="external nofollow" /content/common/css/pagination.css"/>" />

2. Lors de l'utilisation du plug-in de pagination :

Vous pouvez définir une méthode de conversion de page spéciale, introduire et utiliser :

En html :

<ul id="pagination" class="pagination">
</ul>

js :

managementPage:function (pagesize) {
 var obj = $('#managePagination').twbsPagination({
  totalPages: pagesize,//总页数
  startPage: 1,//起始页
  visiblePages: pagesize>5?5:pagesize,//展示页数，超出5页展示5页，未超出时展示总页数
  initiateStartPageClick: true,
  hideOnlyOnePage: true,//只有一页时不展示分页
  onPageClick:function (event,page) {//点击页面事件，回调函数，只能使用ajax异步加载，暂时未发现能够直接在前端操作data的方法。
   $(this).addClass("active").siblings().removeClass("active");

   var start = (page - 1)*5+1;
   var end = page*5+1;
   var param = {
    'start':start,
    'end':end
   };
   ds.manageSystem(manageSystemUrl,param);//异步加载的方法，主要需要将起始页与结束页带回后台
  }
 });
 obj.data();//加载分页样式
},

3. Remarque : lorsque vous utilisez le plug-in de pagination, veuillez noter que s'il y a d'autres données chargées de manière asynchrone dans la page, après avoir exécuté la méthode de pagination pour la première fois, le style de pagination sur la page et les données de la pagination seront les premières données, si le chargement asynchrone ré-entre les données sur la page et que vous souhaitez que la pagination continue sur les nouvelles données, vous devez citer le code suivant :

 //页面重载时置空分页数据（属于分页插件）
 $('#managePagination').empty();
 $('#managePagination').removeData("twbs-pagination");
 $('#managePagination').unbind('page');

L'endroit où ce code est placé est également particulier. Il doit être placé avant les données à charger de manière asynchrone. Les données chargées de manière asynchrone effacent d'abord le. plug-in de pagination en une seule étape, à ce moment, les données de pagination chargées à nouveau constituent le nouveau contenu des données.

4. Le plug-in de pagination utilise essentiellement le code ci-dessus pour satisfaire toutes les exigences.

Recommandations associées :

Explication détaillée du plug-in de pagination jQuery Pagination

Explication de deux types de Utilisation du plug-in de pagination bootstrap paginator

Partager un plug-in de pagination jq

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!