Introduction détaillée à l'utilisation du plug-in de pagination twbsPagination.js-js tutoriel-php.cn

Introduction détaillée à l'utilisation du plug-in de pagination twbsPagination.js

黄舟

Libérer： 2017-10-21 10:16:43

original

3482 Les gens l'ont consulté

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 y a réfléchi. sur des 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 :

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

Copier après la connexion

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

Vous pouvez définir une méthode de conversion de page spéciale et l'introduire en utilisant :

En html :

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

Copier après la connexion

En js :

managementPage:function (pagesize) {
    var obj = $(&#39;#managePagination&#39;).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 = {
                &#39;start&#39;:start,
                &#39;end&#39;:end
            };
            ds.manageSystem(manageSystemUrl,param);//异步加载的方法，主要需要将起始页与结束页带回后台
        }
    });
    obj.data();//加载分页样式
},

Copier après la connexion

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 le style de pagination sur la page et les données dans la pagination seront Pour la première fois des données, si le chargement asynchrone ré-entre les données sur la page et que vous souhaitez que la pagination continue à être implémentée sur les nouvelles données, vous devez citer ce qui suit code :

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

Copier après la connexion

L'endroit où ce code est placé est également. Faites attention au fait qu'il doit être placé avant les données qui sont sur le point d'être chargées de manière asynchrone. Les données chargées de manière asynchrone effacent d'abord la pagination. plug-in À ce moment, les données de pagination chargées à nouveau constituent le nouveau contenu des données.

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

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!