Maison > Article > interface Web > Comment utiliser le plug-in de pagination bootstrap paginator

Comment utiliser le plug-in de pagination bootstrap paginator

PHPzoriginal: 2018-01-19 10:42:112747parcourir

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

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

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>

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>

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>

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!

css ajax bootstrap html JS 事件 ul 算法

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Code d'implémentation pour le chargement synchrone et asynchrone de fichiers JavaScriptArticle suivant：Code d'implémentation pour le chargement synchrone et asynchrone de fichiers JavaScript

Articles Liés

Voir plus