分页插件的使用

分页插件资源下载地址：https://files-cdn.cnblogs.com/files/blogs/667900/jquery.zip

1. 将插件包复制到jquery文件中
2. 在需要分页插件的表头导入依赖

<%--分页插件--%>
    <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'));