Detaillierte Einführung in die Verwendung des Paging-Plug-Ins twbsPagination.js

Das Projekt erforderte zuvor ein Paging-Plugin mit dem Namen pagenation.js. Bei dieser Integration verwendete jedoch ein Kind im Projektteam dieses Plug-in und dachte darüber nach zu Online-Beispielen. Tatsächlich ist der allgemeine Prozess derselbe. Ich teile hauptsächlich einige meiner Erfahrungen mit der Verwendung dieses Paging-Plugins:

1 Um das Paging-Plugin in HTML einzuführen, benötigen Sie:

bootstrap .css

Paging-Plug-in js

Paging-Stil-CSS, von Ihnen selbst geschrieben [Wenn nicht, können Sie auch direkt das von Bootstrap bereitgestellte Paging-CSS verwenden. 】

Mit jquery können Sie jquery.js importieren

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

2. Bei Verwendung des Paging-Plug-Ins:

Sie können eine spezielle Seitenkonvertierungsmethode definieren und diese einführen mit:

In HTML:

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

In 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. Hinweis: Beachten Sie bei der Verwendung des Paging-Plug-Ins, dass nach dem ersten Ausführen der Paging-Methode andere asynchron geladene Daten vorhanden sind Der Paging-Stil auf der Seite und die Daten im Paging werden sein: Wenn beim ersten Mal Daten durch asynchrones Laden erneut Daten auf der Seite eingegeben werden und Sie möchten, dass das Paging weiterhin für die neuen Daten implementiert wird, müssen Sie Folgendes angeben Code:

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

Der Ort, an dem dieser Code platziert wird, ist auch. Beachten Sie, dass er vor den Daten platziert werden muss, die asynchron geladen werden sollen. Die asynchron geladenen Daten löschen zuerst das Paging Zu diesem Zeitpunkt sind die erneut geladenen Paging-Daten der neue Dateninhalt.

4. Das Paging-Plugin kann grundsätzlich den oben genannten Code verwenden, um alle Anforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung des Paging-Plug-Ins twbsPagination.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!