分页插件的使用
分页插件资源下载地址:https://files-cdn.cnblogs.com/files/blogs/667900/jquery.zip
- 将插件包复制到jquery文件中
- 在需要分页插件的表头导入依赖
<%--分页插件--%>
<link rel="stylesheet"
type="text/css"
href="jquery/bs_pagination/jquery.bs_pagination.min.css">
<script
type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script
type="text/javascript"
src="jquery/bs_pagination/en.js"></script>
3.复制事件的关键代码,一般在ajax执行成功后打开分页插件
//计算总页数,data是ajax中success:function(data )的data
var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;
$("#选择器").bs_pagination({
currentPage: pageNo, // 页码
rowsPerPage: pageSize, // 每页显示的记录条数
maxRowsPerPage: 20, // 每页最多显示的记录条数
totalPages: totalPages, // 总页数
totalRows: data.total, // 总记录条数
visiblePageLinks: 3, // 显示几个卡片
showGoToPage: true,
showRowsPerPage: true,
showRowsInfo: true,
showRowsDefaultInfo: true,
onChangePage : function(event, data){
pageList(data.currentPage , data.rowsPerPage);
}
});
4.在html中页码分页的地方插入<div id=”onePage”></div>,使用上面选择器${"#onePage"}绑定分页事件。
细节处理:
1.停留当前页,保留原有展现页数。
pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
2.搜索栏需要使用隐藏域保留查询数据。
点击查询按钮时先把查询的内容保存到隐藏域中。
展示列表时pagelist,先将隐藏域中的数据取出,重新赋到搜索框中。
3.复选框和全选框的使用。
全选框打勾事件
$("#qx").click(function () {
$("input[name=xz]").prop("checked",this.checked);
});
复选框打勾事件
$("#activityBody").on("click",$("input[name=xz]"),function () {
$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
});
停留当前页,保留原有展现页数的应用:
当删除操作success后,需要返回列表第一页,保留原有每页展现数量,代码为
pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
//然后将全选的复选框干掉
$("#qx").prop("checked",false);
更新success后,停留当前页,保留展现页数。
pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));