bs_pagination
东方俊力
1,引入开发包：
2,创建容器:<div>
3,当容器加载完成之后，对容器调用工具函数:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<!-- JQUERY -->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<!-- PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
//函数：如果一段用来完成特定功能的代码到处出现，可以封装成函数。
函数的参数：在编写函数的过程中，如果有一个或者多个数据无法确定，可以把这些数据定义成函数的参数(形参)，将来由函数的调用者来传递参数的具体的值(实参)
function queryActivityByConditionForPage(pageNo,pageSize){
//收集参数
let name=$.trim($("#query-name").val());
let owner=$.trim($("#query-owner").val());
let startDate=$.trim($("#query-startDate").val());
let endDate=$.trim($("#query-endDate").val());
// let pageNo=1;
// let pageSize=10;
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
data:{
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
type: 'post',
dataType: 'json',
success:function (data){
//显示总条数
// $("#totalRowsB").text(data.totalRows);
//显示市场活动列表
//拼接HTML字符串
let htmlStr="";
$.each(data.activityList,function (index,obj){
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/queryActivityDetail.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//显示列表之后，取消全选按钮的选定状态
$("#checkedAll").prop("checked",false);
//计算总页数
let totalPages=1;
if (data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
} else{
totalPages=parseInt(data.totalRows/pageSize)+1;
}
$("#demo_pag1").bs_pagination({
currentPage: pageNo,//当前页号，pageNo
rowsPerPage: pageSize,//每页显示的条数pageSize
totalRows: data.totalRows,//总条数
totalPages: totalPages,//总页数,必填
visiblePageLinks: 5,//页面链接的个数
showGoToPage: true,
showRowsPerPage: true,
showRowsInfo: true,
onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<!-- Just create a div and give it an ID -->
<div id="demo_pag1"></div>
</body>
</html>
---------------------------------------
//在js中可以通过通过选择器,选择当前的分页容器(div),通过bs_pagination方法可以当前对象的参数,两个形参,第一个为固定值,第二为对象中的属性名,从而得到属性的值()
$("#demo_pag1").bs_pagination("getOption","rowsPerPage")
//显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'))
//保持页号和每页显示条数不变
queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'),$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'))
//显示第一页。默认每页显示10条数据
queryActivityByConditionForPage(1,10)
类似资料：