twbsPagination.js Paging-Plug-in-Nutzungsfreigabe

Dieser Artikel bietet Ihnen hauptsächlich eine Erfahrung (Teilen), die auf der Verwendung des Paging-Plug-Ins twbsPagination.js basiert. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Das Projekt erforderte zuvor ein Paging-Plugin namens pagenation.js. Bei dieser Integration verwendete jedoch ein Kind im Projektteam dieses Plug-in Ich habe anhand von Online-Beispielen darüber nachgedacht. 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:

<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. Bei Verwendung des Paging-Plugins:

Sie können eine spezielle Seitenkonvertierungsmethode definieren, einführen und verwenden:

In 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. Hinweis: Beachten Sie bei Verwendung des Paging-Plug-Ins, dass nach dem ersten Ausführen der Paging-Methode der Paging-Stil auf der Seite geändert wird, wenn andere asynchron geladene Daten auf der Seite vorhanden sind Die Daten im Paging sind die ersten Daten. Wenn durch das asynchrone Laden erneut Daten auf der Seite eingegeben werden und Sie möchten, dass das Paging mit den neuen Daten fortgesetzt wird, müssen Sie den folgenden Code angeben:

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

Der Ort, an dem dieser Code platziert wird, muss ebenfalls platziert werden, bevor die Daten asynchron geladen werden Paging-Plugin in einem Schritt. Zu diesem Zeitpunkt sind die erneut geladenen Paging-Daten der neue Dateninhalt.

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

Verwandte Empfehlungen:

Detaillierte Erklärung des jQuery Pagination-Paging-Plug-ins

Erklärung von zwei Arten von Bootstrap-Paginator-Paging-Plug-in mit Beispielen Verwendung

Ein JQ-Paging-Plug-in teilen

Das obige ist der detaillierte Inhalt vontwbsPagination.js Paging-Plug-in-Nutzungsfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!