Heim > Web-Frontend > js-Tutorial > Hauptteil

twbsPagination.js Paging-Plug-in-Nutzungsfreigabe

小云云
Freigeben: 2018-01-04 13:14:35
Original
1682 Leute haben es durchsucht

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"/>" />
Nach dem Login kopieren


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>
Nach dem Login kopieren


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();//加载分页样式
},
Nach dem Login kopieren


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');
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!