使用JS DOM树完成显示操作：
初步显示的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工信息显示</title> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script> <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- 标题 --> <div class="row"> <div class="col-md-4"> <h1>SSM练手项目-CRUD</h1> </div> </div> <!-- 操作按钮 --> <div class="row"> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary">新增</button> <button class="btn btn-danger">删除</button> </div> </div> <!-- 表格 --> <div class="row"> <div class="col-md-12"> <table class="table table-hover" id="emps_table"> <thead> <tr> <th>#</th> <th>empName</th> <th>email</th> <th>gender</th> <th>deptName</th> <th>Option</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!-- 分页信息 --> <div class="row"> <div class="col-md-6" id="page_info"> </div> <div class="col-md-6" id="nav_pagination_info"> </div> </div> </div> <script type="text/javascript"> $(function(){ $.ajax({ url:"${APP_PATH}/emp/list2", data:"pageNo=5", type:"get", success:function (result) { console.log(result); //1、解析并显示员工数据 build_emps_table(result); //2、解析并显示分页信息 build_page_info(result); //3、解析显示分页条数据 build_page_nav(result); } }); }) function build_emps_table(result) { var emps = result.extendInfo.pageInfo.list; $.each(emps, function (index, item) { var empIdTd = $("<td></td>").append(item.empId); var empNameTd = $("<td></td>").append(item.empName); var emailTd = $("<td></td>").append(item.eamil); var genderId = $("<td></td>").append(item.gender=="M"?"男":"女"); var deptNameTd = $("<td></td>").append(item.department.deptName); var editBtn = $("<button></button>").addClass("btn btn-info btn-sm") .append( $("<span></span>").addClass("glyphicon glyphicon-pencil") .append("编辑")); var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm") .append( $("<span></span>").addClass("glyphicon glyphicon-trash") .append("删除")); $("<tr></tr>").append(empIdTd) .append(empNameTd) .append(emailTd) .append(genderId) .append(deptNameTd) .append(editBtn) .append(" ") .append(deleteBtn) .appendTo("#emps_table tbody"); }) } function build_page_info(result) { var pageInfo = result.extendInfo.pageInfo; var curPage = pageInfo.pageNum; var pages = pageInfo.pages; var totalPages = pageInfo.total; $("#page_info").append(" 当前第"+curPage+"页,") .append("共有"+ pages +"页,") .append("总共"+ totalPages + "条记录数"); } function build_page_nav(result) { var nav = $("<nav></nav>"); var ul = $("<tr></tr>").addClass("pagination"); //首页、上一页 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#")); var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //末页、下一页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#")); var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); ul.append(firstPageLi).append(prePageLi); //1,2,3,4,5页码显示 $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) { var numLi = $("<li></li>").append($("<a></a>").append(item)); ul.append(numLi); }) ul.append(nextPageLi).append(lastPageLi); nav.append(ul); $("#nav_pagination_info").append(nav); } </script> </body> </html>
完善以后的代码：
1 当前页激活；
2 首页的话，首页》》》禁止点击，并且不显示数据；
3 末页的话，末页《《《禁止点击，并且不显示数据；；
4 默认显示首页数据；
5 首页，上一页，末页，下一页添加事件，显示对应页码数据
6 中间页每一页，为其添加点击事件，并跳转到对应页面；
7 清空
package com.wgs.controller; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.wgs.domain.Employee; import com.wgs.domain.Msg; import com.wgs.service.EmployeeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import java.util.List; /** * Created by GenshenWang.nomico on 2017/6/8. */ @Controller public class EmployeeController { @Autowired EmployeeService employeeService; /** * 分页查询 * @param pageNo 页码 * @return */ //返回JSON @RequestMapping(value = {"/emp/list2"}, method = {RequestMethod.GET}) @ResponseBody public Msg getEmpListWithJson(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){ PageHelper.startPage(pageNo, 5); List<Employee> employeeList = employeeService.getAll(); PageInfo pageInfo = new PageInfo(employeeList, 5); return Msg.success().add("pageInfo", pageInfo); } @RequestMapping(value = {"/emp/list"}, method = {RequestMethod.GET}) public ModelAndView getEmpList(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){ ModelAndView mv = new ModelAndView("empList"); //获取第1页，10条内容 PageHelper.startPage(pageNo, 10); List<Employee> emps = employeeService.getAll(); // 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。 // 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数 PageInfo<Employee> pageInfo = new PageInfo(emps, 5); mv.addObject("pageInfo", pageInfo); return mv; } @RequestMapping("/emp/index") public String index(){ return "empList2"; } }