Maison >interface Web >js tutoriel >Exemples pour expliquer les deux façons d'utiliser le plug-in de pagination bootstrap paginator
Exemples pour expliquer les deux façons d'utiliser le plug-in de pagination bootstrap paginator
- PHPzoriginal
- 2017-12-21 10:10:299064parcourir
Nous savons que Bootstrap Paginator est un plug-in de pagination js basé sur Bootstrap, mais il peut être utilisé de plusieurs manières. Cet article présente principalement deux façons d'utiliser le plug-in de pagination bootstrap Paginator. ensemble. J'espère que cela pourra aider tout le monde.
[Recommandations vidéo associées : Tutoriel Bootstrap]
Il existe deux façons de paginer :
1. pagination : ajax Obtenez toutes les données en une seule requête, adaptée aux petites quantités de données (moins de 10 000 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 de Balises ul ; 2. Écrivez l'algorithme de pagination au début.
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>
L'avez-vous appris ? Dépêchez-vous et essayez-le.
Recommandations associées :
Partagez un plug-in de pagination jq
Une méthode de transformation du plug-in de pagination Jquery (pagination côté serveur)_jquery
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!