好资源导航 » 文章资讯 » bootstrap paginator分页插件的两种使用方式实例详解

bootstrap paginator分页插件的两种使用方式实例详解

2023-09-21 02:33:05 54

分页有两种方式：

1.前台分页：ajax一次请求获取全部数据，适合少量数据（万条数据以下）；

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

注意：1.bootstrap3中分页的HTML部分要求使用ul标签；2.前台写分页算法。

2.后台分页：发送多次ajax，每次获取指定页数的数据（万条数据以上）。

$('#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":returnpage;
}
},//改写分页按钮字样
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);//处理成功返回的数据
}
});
}
});

注意：1.bootstrap3中分页的HTML部分要求使用ul标签；2.后台写分页算法。

ps：下面看下bootstrap-paginator分页控件的使用

首先对js和css的引用

初始化分页控件

如果bootstrapMajorVersion:1时，则上面的分页标签用div

如果bootstrapMajorVersion:3时，则上面的分页标签用ul

其中：currentPage是当前你所在的页数numberOfPages是分页按钮可见的最多数totalPages是所有数据能分的页数（这些options（选项）是在初始化分页控件的时候使用的。）

在onPageClicked事件中 page参数标识你点击页数时所在的页数。

完整代码如下：

$(function(){ varoptions={ 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); })

总结

以上所述是小编给大家介绍的bootstrappaginator分页插件的两种使用方式实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

bootstrap paginator分页插件的两种使用方式实例详解

热门推荐

随机推荐