Heim > Artikel > Web-Frontend > So verwenden Sie das Bootstrap-Paginator-Paging-Plug-in

So verwenden Sie das Bootstrap-Paginator-Paging-Plug-in

PHPzOriginal: 2018-01-19 10:42:112747Durchsuche

Bootstrap Paginator ist ein auf Bootstrap basierendes JS-Paging-Plugin. Ich hoffe, es kann Ihnen helfen.

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Es gibt zwei Möglichkeiten zum Paginieren:

1. Front-Desk-Paginierung: Ajax fordert alle Daten in einer Anfrage an, geeignet für kleine Datenmengen (weniger als 10.000 Datenstücke); 2. Schreiben Sie den Paging-Algorithmus an der Rezeption.

$.ajax({
  type: "GET",
  url: "",//后台接口地址
  dataType: "json",
  success: function (msg) {
   var pages = Math.ceil(msg.data / 5);//data是数据总量 
   var element = $('#id');//对应ul的id
   element.bootstrapPaginator({
    bootstrapMajorVersion: 3,//bootstrap版本
    currentPage: page,//当前页面 
    numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li） 
    totalPages: pages //总页数
   });
  }
 });

2. Hintergrund-Paging: Senden Sie mehrere Ajax-Dateien und erhalten Sie jedes Mal eine bestimmte Anzahl von Datenseiten (mehr als 10.000 Daten).

Hinweis: 1. Der HTML-Teil des Paging in Bootstrap3 erfordert die Verwendung von ul-Tags. 2. Der Paging-Algorithmus wird im Hintergrund geschrieben.

$('#id').bootstrapPaginator({
    bootstrapMajorVersion: 3,//bootstrap版本
    currentPage: 1,//当前页码
    totalPages: data.cn,//总页数（后台传过来的数据）
    numberOfPages: 5,//一页显示几个按钮
    itemTexts: function (type, page, current) {
     switch (type) {
      case "first": return "首页";
      case "prev": return "上一页";
      case "next": return "下一页";
      case "last": return "末页";
      case "page": return page;
     }
    },//改写分页按钮字样
    onPageClicked: function (event, originalEvent, type, page) {
     $.ajax({
      url: '../../interface/xw_zxdt_list.php',
      type: 'post',
      data: {page: page},
      dataType: 'json',
      success: function (data) {
       tplData(data);//处理成功返回的数据
      }
     });
    }
   });

ps: Werfen wir einen Blick auf die Verwendung der Bootstrap-Paginator-Paging-Steuerung

Erste Referenz von js und css

Initialisieren Sie die Paging-Steuerung

<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>

Bei BootstrapMajorVersion:1 ist das Paging-Tag oben p

　<p id="page"></p>
　　<script type="text/javascript">
  $(function(){
   var options={
    bootstrapMajorVersion:1, //版本
    currentPage:1, //当前页数
    numberOfPages:5, //最多显示Page页
    totalPages:10, //所有数据可以显示的页数
    onPageClicked:function(e,originalEvent,type,page){
    }
   }
   $("#page").bootstrapPaginator(options);
  })
 </script>

Bei BootstrapMajorVersion:3 ist das Paging-Tag oben ul

wobei: currentPage die Anzahl der Seiten ist, auf denen Sie sich gerade befinden .numberOfPages ist die maximale Anzahl der sichtbaren Paging-Schaltflächen. (Diese Optionen werden beim Initialisieren der Paging-Steuerung verwendet.)

Im onPageClicked-Ereignis die Seite Der Parameter identifiziert die Seite, auf die Sie geklickt haben. Die Seitenzahl beim Zählen.

Der vollständige Code lautet wie folgt:

Verwandte Empfehlungen:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
 <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
 <script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
</head>
<body>
 <p id="page"></p>
 <script type="text/javascript">
  $(function(){
   var options={
    bootstrapMajorVersion:1, //版本
    currentPage:1, //当前页数
    numberOfPages:5, //最多显示Page页
    totalPages:10, //所有数据可以显示的页数
    onPageClicked:function(e,originalEvent,type,page){
     console.log("e");
     console.log(e);
     console.log("originalEvent");
     console.log(originalEvent);
     console.log("type");
     console.log(type);
     console.log("page");
     console.log(page);
    }
   }
   $("#page").bootstrapPaginator(options);
  })
 </script>
</body>
</html>

Teilen Sie die Verwendung des Paginierungs-Plug-Ins twbsPagination.js

thinkPHP5 verwendet das Laypage-Paging-Plug-in, um die Listen-Paging-Funktion zu implementieren_php-Beispiel

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Bootstrap-Paginator-Paging-Plug-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css ajax bootstrap html JS 事件 ul 算法

Stellungnahme：

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

Vorheriger Artikel：Implementierungscode zum synchronen und asynchronen Laden von JavaScript-DateienNächster Artikel：Implementierungscode zum synchronen und asynchronen Laden von JavaScript-Dateien

In Verbindung stehende Artikel

Mehr sehen