Comment utiliser le plug-in de pagination bootstrap paginator-js tutoriel-php.cn

Comment utiliser le plug-in de pagination bootstrap paginator

PHPz

Libérer： 2018-10-16 16:50:56

original

2775 Les gens l'ont consulté

Bootstrap Paginator est un plug-in de pagination js basé sur Bootstrap. Cet article présente principalement deux façons d'utiliser le plug-in de pagination bootstrap Paginator. Jetons un coup d'œil.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Il existe deux façons de paginer :

1. Pagination à la réception : Ajax demande toutes les données en une seule requête, adaptée aux petites quantités de données (moins de 10 000 éléments de données)

$.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 //总页数
   });
  }
 });

Copier après la connexion

Remarque : 1. La partie HTML de la pagination dans bootstrap3 nécessite l'utilisation ; des balises ul ; 2. Écrivez l’algorithme de radiomessagerie à la réception.

2. Pagination en arrière-plan : envoyez plusieurs ajax et obtenez un nombre spécifié de pages de données à chaque fois (plus de 10 000 éléments de données).

$('#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);//处理成功返回的数据
      }
     });
    }
   });

Copier après la connexion

Remarque : 1. La partie HTML de la pagination dans bootstrap3 nécessite l'utilisation de balises ul ; 2. L'algorithme de pagination est écrit en arrière-plan.

ps : Jetons un coup d'œil à l'utilisation du contrôle de pagination bootstrap-paginator

Première référence js et css

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

Copier après la connexion

Initialiser le contrôle de pagination

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

Copier après la connexion

Si bootstrapMajorVersion:1, la balise de pagination ci-dessus est p

Si bootstrapMajorVersion:3, la balise de pagination ci-dessus est ul

où : currentPage est le nombre de pages sur lesquelles vous vous trouvez actuellement . numberOfPages est le nombre maximum de boutons de pagination visibles. totalPages est le nombre de pages dans lesquelles toutes les données peuvent être divisées (Ces options sont utilisées lors de l'initialisation du contrôle de pagination.)

Dans l'événement onPageClicked, la page. Le paramètre identifie la page sur laquelle vous avez cliqué. Le numéro de page lors du comptage.

Le code complet est le suivant :

<!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>

Copier après la connexion

Recommandations associées :

Partager l'utilisation du plug-in de pagination twbsPagination.js

thinkPHP5 utilise le plug-in de pagination laypage pour implémenter un exemple de fonction de pagination de liste_php

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

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!