jQuery Pagination Plugin for Bootstrap | jQuery Plugins (jquery-plugins.net)
前端插件的使用步骤：
1、引入开发包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--以上都是下载好了之后，放到对应的目录中，按照路径才能导入成功-->
<!--先导入jquery，然后导入bootstrap，被依赖的先导-->
<!--这里别的jquery版本跑不起来，不显示-->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="bs/bootstrap_3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="bs/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<!--最后导入，翻页插件-->
<!--引入css-->
<link rel="stylesheet" type="text/css" href="bs_pagination-master/jquery.bs_pagination.min.css">
<script type="text/javascript" src="bs_pagination-master/jquery.bs_pagination.min.js"></script>
<!--引入语言包-->
<script type="text/javascript" src="bs_pagination-master/localization/en.js"></script>
</head>
localization目录下的en.min.js 是英语的，现在给他翻译成中文。
2、创建容器(提供标签，此插件只能使用div标签装下)
<!--创建容器-->
<div id="demoPage01"></div>
3、当容器加载完成之后，容器调用工具函数
<script type="text/javascript">
$(function () {
//调用这个工具函数，默认模拟了1000条表数据。并且会通过 总页数 和 每页显示条数 计算出总条数
//默认每页显示10条数据，（此工具中，一页最多能显示100条数据）
$("#demoPage01").bs_pagination({
currentPage:2, //当前开始页，默认是1 相当于没计算出来的pageNo 需要你用公式去计算
totalRows:100, //总条数,数据库中取
rowsPerPage:2, //每页显示条数，用户自己切换，默认是10 相当于pageSize
totalPages:50, //总页数
//注意：他的程序在这里的总条数÷每页显示条数 不能得出 总页数。他不会帮你计算，要自己计算。
//此三个参数，一个从数据库中查询的，一个是用户选的，最后一个是通过前两个计算出来的
//设置最多一组显示几个卡片，默认是5，
visiblePageLinks:5,
//设置是否显示，"跳转到某页" 的输入框 默认是true
//好像上面的参数大于10，就不会显示 "跳转到某页" 的输入框了
showGoToPage:true,
//设置是否显示 "每页显示条数" 默认是true
//就是用户可以手动切换，每页显示多少条数据
//系统会自己计算 总条数÷每页显示条数 得出总共有几页
//前期是将 总页数 和 每页显示条数 都默认，注释掉，才能帮你计算总页数
showRowsPerPage:true,
//是否显示记录的信息 默认是true
showRowsInfo:true,
//不管是，切换当前显示多少条数据，还是切换卡片，还是跳转到某页，都会执行此函数
//执行此函数会返回，切换之后的pageNo和pageSize
//此函数有两个参数，一个event,一个pageObj
//对象属性
onChangePage:function(event,pageObj){
//pageObj就代表这个工具函数bs_pagination
//pageObj.currentPage可以获取pageNo 第几页
//pageObj.rowsPerPage可以获取 一页最多显示几条数据
alert("第"+pageObj.currentPage+"页，从表中的，第"+(pageObj.currentPage-1)*pageObj.rowsPerPage+"行数据，开始！");
alert("pageSize等于："+pageObj.rowsPerPage)
}
});
});
</script>工具函数中的参数详解
<script type="text/javascript">
$(function () {
//调用这个工具函数，默认模拟了1000条表数据。并且会通过 总页数 和 每页显示条数 计算出总条数
//默认每页显示10条数据，（此工具中，一页最多能显示100条数据）
$("#demoPage01").bs_pagination({
currentPage:2, //当前开始页，默认是1 相当于没计算出来的pageNo 需要你用公式去计算（公式）
totalRows:100, //总条数,数据库中取
rowsPerPage:2, //每页显示条数，用户自己切换，默认是10 相当于pageSize
totalPages:50, //总页数
//注意：他的程序在这里的总条数÷每页显示条数 不能得出 总页数。他不会帮你计算，要自己计算。
//此三个参数，一个从数据库中查询的，一个是用户选的，最后一个是通过前两个计算出来的
//设置最多一组显示几个卡片，默认是5，
visiblePageLinks:5,
//设置是否显示，"跳转到某页" 的输入框 默认是true
//好像上面的参数大于10，就不会显示 "跳转到某页" 的输入框了
showGoToPage:true,
//设置是否显示 "每页显示条数" 默认是true
//就是用户可以手动切换，每页显示多少条数据
//系统会自己计算 总条数÷每页显示条数 得出总共有几页
//前期是将 总页数 和 每页显示条数 都默认，注释掉，才能帮你计算总页数
showRowsPerPage:true,
//是否显示记录的信息 默认是true
showRowsInfo:true,
//还有一个对象属性，onChangePage
//不管是，切换当前显示多少条数据，还是切换卡片，还是跳转到某页，都会执行此函数
//执行此函数会返回，切换之后的pageNo和pageSize
//此函数有两个参数，一个event,一个pageObj
onChangePage:function(event,pageObj){
//pageObj就代表这个工具函数bs_pagination
alert("第"+pageObj.currentPage+"页，从表中的，第"+(pageObj.currentPage-1)*pageObj.rowsPerPage+"行数据，开始！");
}
});
});
</script>
翻页查询是此模块中最难的一个实现；
这里要发送两个查询；第一个查询不算难，第二个难（*）;
这两个都要向后台发送请求去查询。
1、用户点击修改每页显示最大的条数。会发送请求
根据需求这里的起始页应该从第一页开始
假设本来就十条数据，现在是每页显示十条数据，这里本来就只有一页。
用户修改了每页最大显示条数，现在变成一页显示二十条数据行，是不是还是只有一页？
除非有二十一条数据行，才能开到第二页去。
第一个参数pageNo: 每次从第 1 页开始
第二个参数pageSize: 显示条数的话，是用户自己选择的，不选择则默认是一页显示十条。
2、用户点击当前第几页(*),假设有二页，用户点击第二页，则需要从表中找出第二页是从哪行数据开始查的。
第一个参数pageNo: （第几页-1）/最大显示页 计算第某某页是从表中的哪行开始的？
第二个参数pageSize: 用户自己选择，，不选择每页显示条数默认是十
翻页卡片非常难做
如果有六页，当前是第五页，点击下一页就到了第六页，那下一页和尾页就变灰了不能点了。
如果有六页，当前是第二页，点击上一页就到了第一页，那上一页和首页就变灰了不能点了。
假如有一千页需要显示，我们卡片分组，一组显示五张卡片，切换到六页的时候，卡片又回到第一页的样子，拉回来。只不过原来的数字一变成了数字六了。
点击首页到第一页，点击尾页到最后一页。
还要根据你点击的效果，还需要动态的变化。
onChangePage:function(event,pageObj){
//用户点击卡片，则执行一次这个代码,返回用户切换之后的pageNo和pageSize
// pageObj就代表这个对象本身，所以只需要这个对象.属性，就能获取到值了
//这里传入pageNo和pageSize就可以解决，所有的需求问题
/*
1、如果用户点击卡片切换页，currentPage可以显示出当前是第几页数。
知道了用户想看多少页的内容，就可以通过公式可以计算出，第几页从表中的哪行数据开始。
rowsPerPage可以得到当前用户设置的最大显示条数。拿到这个两个参数，就可以进行查询。limit给了
两个参数，就可以查出来。
2、如果用户点击最大显示条数，那就PageNo默认就是第一页开始，下标就是0
PageSize直接传进去就好了。
currentPage就是PageNo , rowsPerPage就是PageSize
*/
queryConditionAndPage(pageObj.currentPage,pageObj.rowsPerPage);
//当跳转到市场活动的jsp页面的时候，上面的方法调用，会通过需求每页显示十条记录调用此方法
/*pageNo开始行，pageSize每页最大的显示条数。用户如果修改最大显示页数，每次都应该从第一行数据开始查询。
最后通过 总条数 除 每页显示条数 得出总页数，并且最后从第一页开始。
如果不传条件，则默认查询所有的市场活动。
传入参数1、5，表示从第一页开始，从表中下标零行开始，每页显示五条数据。从第几行数据开始查询，每页显示几条数据
查询所有 条件查询和市场活动的方法显示，谁需要谁就调。*/
function queryConditionAndPage(pageNo,pageSize){
// alert("此页面第一个执行的函数 ");
// trim()删除前后空格;
var name=$("#queryName").val().trim();
var owner=$("#queryOwner").val().trim();
// var cost=$("#queryCost").val();
var startDate=$("#queryStartDate").val().trim();
var endDate=$("#queryEndDate").val().trim();
//发送请求
$.ajax({
//ActivityController类的queryActivityByConditionPage方法
url:'workbench/activity/queryActivityByConditionPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
//当前是多少页
pageNo:pageNo,
//当前页显示多少条数据
pageSize:pageSize
},
type:'post',
dataType:'json',
//显示结果
success:function(data){
//显示总条数，将查询回来的总条数，覆盖掉原来写死的这个值
$("#totalB").text(data.total);
totalRows=data.total;
var htmlStr="";
//显示市场活动的列表,调用each方法,遍历每个市场活动，取出他们的值
//obj表示当前的activity对象
$.each(data.aList,function(index,obj) {
var cost=obj.cost;
htmlStr+="<tr class='active'>";
//给checkbox绑定一个属性value等于市场活动的id值，方便后期的修改和删除
htmlStr+="<td><input type='checkbox' value="+obj.id+" /></td>";
//这里，给市场活动名称添加了一个超链接，点击它，将弹到更加详细的页面去，并在超链接后面携带两个参数，市场活动id、市场活动的名字到那个页面去
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\"οnclick=\"window.location.href='workbench/activity/toActivityDetail.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
//展示市场活动的所有者
htmlStr+="<td>"+obj.owner+"</td>";
//展示市场活动的成本
htmlStr+="<td>"+cost+"</td>";
//展示市场活动的开始日期
htmlStr+="<td>"+obj.startDate+"</td>";
//展示市场活动的结束日期
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
// alert("html字符串现在的长度："+htmlStr.length);
//现在子节点还在内存中，将子节点添加到父节点中去。
//html是覆盖显示。append是追加显示，不会清空原来的内容。
//after是后显示。before是前显示。
$("#tBody").html(htmlStr);
var totalPages=1;
//计算总页数 总条数/每页显示条数 假设，有8条数据，每页显示2条，那总页数就是4页
//如果不能整除，就在商的基础上加一，js弱类型语言，取模一定是小数
if(data.total%pageSize==0){
totalPages=data.total/pageSize;
}else {
//parseInt将小数转为整数
totalPages=parseInt(data.total/pageSize)+1;
}
//本来代码是加在这里的
//对容器显示翻页函数，显示翻页信息
// var pageNo;
// var pageSize;
// var totalRows;
$("#demo_pag1").bs_pagination({
currentPage:pageNo, //默认显示当前页数，默认显示1
totalPages:totalPages, //总页数 必填参数，totalRows/rowsPerPage==总页数
rowsPerPage:pageSize, //每页显示条数，默认是10，相当于用户输入的pageSize
// totalRows:data.total, //总条数，默认是一千,数据库中查到的数据
totalRows:totalRows, //总条数，默认是一千,数据库中查到的数据
visiblePageLinks: 8, //一次显示的卡片数量，默认是5
showGoToPage:true, //显示跳转的页面文本框，默认值为true显示,
showRowsPerPage:true, //是否显示每页显示条数，默认值为true
showRowsInfo:false, //显示记录的信息，默认为true
onChangePage:function(event,pageObj){
queryConditionAndPage(pageObj.currentPage,pageObj.rowsPerPage);
//取消全选按钮
// $("#checkboxs").prop("checked",false);
}
});
}
});
};
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
