效果：
- 分页插件配置属性
**reasonable **，
当点击分页条数据 < 1 跳转到 第一页，
当点击分页条数据 > 最大页码 跳转到 最后一页。
<!--分页插件此处，方在 typeAliases 后面--><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"><!--当点击分页条数据 小于 1 跳转到 第一页当点击分页条数据 大于 最大页码 跳转到 最后一页--><property name="reasonable" value="true"/></plugin></plugins>
index.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head><title>员工信息查询</title><%pageContext.setAttribute("path",request.getContextPath());%></head><body>${path}<%-- /SSM --%><%--搭建页面--%><div class="container"><%--标题--%><div class="row"><div class=".col-lg-12"><h1>SSM-CRUD</h1></div></div><%--按钮--%><div class="row"><div class="col-md-4 col-md-offset-8"><%--列偏移--%><button type="button" class="btn btn-success">新增</button><button type="button" class="btn btn-danger">删除</button></div></div><%--显示表格数据--%><div class="row "><div class="col-md-12"><table class="table table-hover" id="employees_table"><thead><tr><th>ID</th><th>姓名</th><th>性别</th><th>邮箱</th><th>部门</th><th>操作</th></tr></thead><tbody></tbody></table></div></div><%--分选，点选条--%><div id="navigation_pages" class="row" ></div><%--分页，信息条--%><div id="page_info" class="col-md-6"></div></div><%--引入jQuery--%><script type="text/javascript" src="${path}/static/script/jquery-3.6.0.js"></script><%--引入样式--%><link href="${path}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet"><script src="${path}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script><script type="text/javascript">//1、===============================页面加载完成后，直接发送Ajax请求，获取分页数据。=====================================$(function(){//去首页to_page(1);});//==========================Ajax请求、与函数回调==========================function to_page(pageNumber) {$.ajax({url:"${path}/list",//请求地址data:"pageNumber="+pageNumber,//携带参数type:"GET",//请求方式success:function (result){//回调函数//console.log(result);//输出结果到浏览器 响应 Response//1、调用函数,信息显示build_employee_table(result);//2、显示分页信息build_page_info(result);//3、显示分页条build_page_nav(result);}});}/*====================================员工信息表格==========================================*/function build_employee_table(result){//清空table,员工信息，跳转页面后刷新数据，而不是复制。$("#employees_table tbody").empty();//获取所有员工信息var employees = result.extend.pageInfo.list;/*** employees:要遍历的数据* index：索引* item：遍历的，变量名* */$.each(employees,function (index,item){//alert(item.empName);var empIdTd = $("<td></td>").append(item.empId);/*创建 <td></td> 标签 并添加遍历的内容*/var empNameTd = $("<td></td>").append(item.empName);var denderTd = $("<td></td>").append(item.gender);var emailTd = $("<td></td>").append(item.email);var deptNameTd = $("<td></td>").append(item.department.deptName);//创建编辑按钮var editBtn = $("<button></button>").addClass("btn btn-primary").append($("<span></span>").addClass("glyphicon glyphicon-pencil btn-xs")).append("编辑");//创建删除按钮var deleteBtn = $("<button></button>").addClass("btn btn-danger").append($("<span></span>").addClass("glyphicon glyphicon-trash btn-xs")).append("删除");//把编辑、删除两个按钮添加到 同一个单元格里var button = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);/*创建<tr></tr>标签 把遍历到的员工信息，追加到内容追加到里面*/$("<tr></tr>").append(empIdTd).append(empNameTd).append(denderTd).append(emailTd).append(deptNameTd).append(button).appendTo("#employees_table tbody");//使用选择器，把<tr>插入到 id="#employees_table" 下的 tbody标签中});}//分页信息=================================================================================================function build_page_info(result){//点击跳转页面后，清空分页条信息，重新刷新。$("#page_info").empty();$("#page_info").append("当前第" + result.extend.pageInfo.pageNum +"页，共" + result.extend.pageInfo.pages +"页，共" + result.extend.pageInfo.total + "条记录");}//解析，分页条=========================================================================================function build_page_nav(result){//点击跳转页面后，清空分页条，重新刷新。$("#navigation_pages").empty();//<ul></ul> 标签var divUl = $("<ul></ul>").addClass("pagination");//首页var firstPage = $("<li></li>").append($("<a></a>").append("首页"));//上一页,var prePage = $("<li></li>").append($("<a></a>").attr("href","#").attr("aria-label","Previous").append($("<span></span>").attr("aria-hidden","true").append("«")));//判断没有"上一页"时，"首页"、上一页"禁用，有则不禁用。if (result.extend.pageInfo.hasPreviousPage == false){firstPage.addClass("disabled");prePage.addClass("disabled");//disabled 是 BootStrap 的选中禁用状态}else {//为 "首页" 添加单击事件，使它可以点击跳转firstPage.click(function () {to_page(1);});//为 "上一页" 添加单击事件，使他们可以点击跳转prePage.click(function () {to_page(result.extend.pageInfo.pageNum-1);});}//添加到 <ul></ul>中divUl.append(firstPage).append(prePage);//遍历显示分页条，页面的连续页码1、2、3、、5、...$.each(result.extend.pageInfo.navigatepageNums,function (index,item){//显示页面的连续页码1、2、3、、5、...var navpage = $("<li></li>").append($("<a></a>").attr("href","#").append(item));//判断是当前页，就添加高亮if (result.extend.pageInfo.pageNum == item) {navpage.addClass("active");//active 是 BootStrap 的选中高亮状态}//为显示页面的连续页码1、2、3、、5、...添加单击事件navpage.click(function () {//调用ajax请求，ajax请求会调用员工信息、分页信息、分页条//其中，员工信息、分页条，会添加.empty();清空数据后，再遍历，达到刷新信息的目的。to_page(item);});divUl.append(navpage);//添加到 <ul></ul>中});//下一页var nextPage = $("<li></li>").append($("<a></a>").attr("href","#").append("»"));//末页var lastPage = $("<li></li>").append($("<a></a>").append("末页"));//添加到 <ul></ul>中divUl.append(nextPage).append(lastPage);//判断没有"下一页"时，"末页"、下一页"禁用，有则不禁用。if (result.extend.pageInfo.hasNextPage == false){nextPage.addClass("disabled");lastPage.addClass("disabled");//disabled 是 BootStrap 的选中禁用状态} else {//为 "下一页" 添加单击事件，使他们可以点击跳转nextPage.click(function () {to_page(result.extend.pageInfo.pageNum+1);});//为 "末页" 添加单击事件，使它可以点击跳转lastPage.click(function () {to_page(result.extend.pageInfo.pages);});}//最后添加到，分页条的 div 中。$("<nav></nav>").attr("aria-label","Page navigation").append(divUl).appendTo($("#navigation_pages"));}</script></body></html>
若有收获，就点个赞吧
0 人点赞
