Home >Web Front-end >JS Tutorial >Examples to explain the two ways to use the bootstrap paginator paging plug-in
Examples to explain the two ways to use the bootstrap paginator paging plug-in
- PHPzOriginal
- 2017-12-21 10:10:299075browse
We know that Bootstrap Paginator is a js paging plug-in based on Bootstrap, but it can be used in more than one way. This article mainly introduces two ways of using the bootstrap paginator paging plug-in. Let’s take a look together. I hope it can help. Everyone.
【Related video recommendation: Bootstrap tutorial】
There are two ways to paginate:
1. Front-end paging: ajax Get all the data in one request, suitable for a small amount of data (less than 10,000 pieces of data);
$.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 //总页数
});
}
});
Note: 1. The HTML part of paging in bootstrap3 requires the use of ul tags; 2. Write the paging algorithm at the front desk.
2. Background paging: Send ajax multiple times, and obtain a specified number of pages of data each time (more than 10,000 pieces of data).
$('#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);//处理成功返回的数据
}
});
}
});
Note: 1. The HTML part of paging in bootstrap3 requires the use of ul tags; 2. The paging algorithm is written in the background.
ps: Let’s take a look at the use of bootstrap-paginator paging control
First reference to js and 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>
Initialize the paging control
<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>
If bootstrapMajorVersion :1, then the paging tag above is p
If bootstrapMajorVersion:3, the paging tag above is ul
where: currentPage is the number of pages you are currently on and numberOfPages is the paging button The maximum number of visible totalPages is the number of pages that all data can be divided into (these options (options) are used when initializing the paging control.)
In the onPageClicked event, the page parameter identifies the page where you clicked Number of pages.
The complete code is as follows:
<!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>
Have you learned it? Hurry up and give it a try.
Related recommendations:
Bootstrap Paginator paging plug-in is combined with ajax to achieve dynamic no refresh Paging effect
How to transform a Jquery paging plug-in (server-side paging)_jquery
The above is the detailed content of Examples to explain the two ways to use the bootstrap paginator paging plug-in. For more information, please follow other related articles on the PHP Chinese website!