16、尚硅谷_SSM高级整合_查询_返回分页的json数据.avi
在上一章节的操作中我们是将PageInfo对象存储在request域中，然后list页面解析request域中的对象实现信息的显示。但是上面的操作只适合客户端是浏览器的情况。如果客户端是android，也要查询人员列表信息，这个时候服务器返回的数据应该是json数据，所以我们需要对后台的控制层进行改造。返回的数据应该是json数据，json数据浏览器可以解析，android客户端也可以解析
控制层要返回json数据需要使用到@reponsebody，需要用到jack jar包
<!-- 返回json字符串的支持 --> <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.8.8</version> </dependency>这里我们返回的json数据：应该包括返回状态、业务处理结果等，我们封装这样一个返回json数据的通用类
1package com.atguigu.crud.bean; 2 3import java.util.HashMap; 4import java.util.Map; 5 6public class Msg { 7 8 //状态码 100表示状态成功 200表示状态异常 9 private int code; 10 11 //返回的提示信息 12 private String msg; 13 14 //返回的业务数据，封装到hashmap中 15 16 private Map<String,Object> extend = new HashMap<String, Object>(); 17 18 public int getCode() { 19 return code; 20 } 21 22 public void setCode(int code) { 23 this.code = code; 24 } 25 26 public String getMsg() { 27 return msg; 28 } 29 30 public void setMsg(String msg) { 31 this.msg = msg; 32 } 33 34 public Map<String, Object> getExtend() { 35 return extend; 36 } 37 38 public void setExtend(Map<String, Object> extend) { 39 this.extend = extend; 40 } 41 42 43 44 45 46 47}
EmployeeController.java
1package com.atguigu.crud.controller; 2 3import java.util.List; 4 5import org.springframework.beans.factory.annotation.Autowired; 6import org.springframework.stereotype.Controller; 7import org.springframework.ui.Model; 8import org.springframework.web.bind.annotation.RequestMapping; 9import org.springframework.web.bind.annotation.RequestParam; 10import org.springframework.web.bind.annotation.ResponseBody; 11 12import com.atguigu.crud.bean.Employee; 13import com.atguigu.crud.bean.Msg; 14import com.atguigu.crud.dao.EmployeeMapper; 15import com.atguigu.crud.service.EmployeeService; 16import com.github.pagehelper.PageHelper; 17import com.github.pagehelper.PageInfo; 18 19/** 20 * 21 * 处理员工的增删改查操作 22 * */ 23@Controller 24public class EmployeeController { 25 26 @Autowired 27 private EmployeeService employeeService; 28 29 30 /** 31 * 负责将PageInfo对象转化成json对象 32 * */ 33 @RequestMapping("/emps") 34 @ResponseBody 35 public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn,Model model) { 36 //使用mybatis分页插件 pn表示当前查询的页数，5表示每页显示第几条 37 System.out.println("EmployeeController is called"); 38 PageHelper.startPage(pn, 5); 39 //在PageHelper.startPage(pn, 5);后面的查询语句就可以实现分页查询 40 List<Employee> list = employeeService.getAll(); 41 //我们将查询的结果封装到PageInfo对象之中,5表示右下角导航栏的数目是5 42 PageInfo info = new PageInfo(list,5); 43 Msg msg = new Msg(); 44 msg.setCode(100); 45 msg.setMsg("业务操作成功"); 46 msg.getExtend().put("pageInfo", info); 47 return msg; 48 } 49}
对应的json数据如下：
1{"code":100,"msg":"业务操作成功","extend":{"pageInfo":{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1000,"pages":200,"list":[{"empId":1,"empName":"0d9a40","gender":"M","email":"0d9a40@qq.com","dId":1,"department":{"deptId":1,"deptName":"研发部"}},{"empId":2,"empName":"cea4a1","gender":"M","email":"cea4a1@qq.com","dId":1,"department":{"deptId":1,"deptName":"研发部"}},{"empId":3,"empName":"8f5ee2","gender":"M","email":"8f5ee2@qq.com","dId":1,"department":{"deptId":1,"deptName":"研发部"}},{"empId":4,"empName":"9c96c3","gender":"M","email":"9c96c3@qq.com","dId":1,"department":{"deptId":1,"deptName":"研发部"}},{"empId":5,"empName":"3f2c14","gender":"M","email":"3f2c14@qq.com","dId":1,"department":{"deptId":1,"deptName":"研发部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"lastPage":5,"firstPage":1}}} 2 3 4{ 5 "code":100, 6 "msg":"业务操作成功", 7 "extend":{ 8 "pageInfo":{ 9 "pageNum":1, 10 "pageSize":5, 11 "size":5, 12 "startRow":1, 13 "endRow":5, 14 "total":1000, 15 "pages":200, 16 "list":[ 17 { 18 "empId":1, 19 "empName":"0d9a40", 20 "gender":"M", 21 "email":"0d9a40@qq.com", 22 "dId":1, 23 "department":{ 24 "deptId":1, 25 "deptName":"研发部" 26 } 27 }, 28 { 29 "empId":2, 30 "empName":"cea4a1", 31 "gender":"M", 32 "email":"cea4a1@qq.com", 33 "dId":1, 34 "department":{ 35 "deptId":1, 36 "deptName":"研发部" 37 } 38 }, 39 { 40 "empId":3, 41 "empName":"8f5ee2", 42 "gender":"M", 43 "email":"8f5ee2@qq.com", 44 "dId":1, 45 "department":{ 46 "deptId":1, 47 "deptName":"研发部" 48 } 49 }, 50 { 51 "empId":4, 52 "empName":"9c96c3", 53 "gender":"M", 54 "email":"9c96c3@qq.com", 55 "dId":1, 56 "department":{ 57 "deptId":1, 58 "deptName":"研发部" 59 } 60 }, 61 { 62 "empId":5, 63 "empName":"3f2c14", 64 "gender":"M", 65 "email":"3f2c14@qq.com", 66 "dId":1, 67 "department":{ 68 "deptId":1, 69 "deptName":"研发部" 70 } 71 } 72 ], 73 "prePage":0, 74 "nextPage":2, 75 "isFirstPage":true, 76 "isLastPage":false, 77 "hasPreviousPage":false, 78 "hasNextPage":true, 79 "navigatePages":5, 80 "navigatepageNums":[ 81 1, 82 2, 83 3, 84 4, 85 5 86 ], 87 "navigateFirstPage":1, 88 "navigateLastPage":5, 89 "lastPage":5, 90 "firstPage":1 91 } 92 } 93} 94 95©2014 JSON.cn All
17、尚硅谷_SSM高级整合_查询_构建员工列表.avi
接下来我们就要对index.jsp页面进行修改，进入到该页面发起ajax请求获得数据，然后解析该数据在页面上显示出来
我们修改我们的index.jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5<html> 6<head> 7<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8<title>员工列表</title> 9<% 10String path = request.getContextPath(); 11String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 12%> 13<% 14 pageContext.setAttribute("APP_PATH", request.getContextPath()); 15%> 16<!-- web路径： 17不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。 18以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名 19 http://localhost:3306/crud 20 --> 21<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script> 22<link href="${APP_PATH }/static/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 23<script src="${APP_PATH}/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script> 24</head> 25<body> 26 <!-- 搭建显示页面 --> 27 <div class="container"> 28 <!-- 标题 --> 29 <div class="row"> 30 <div class="col-md-12"> 31 <h1>SSM-CRUD</h1> 32 </div> 33 </div> 34 <!-- 按钮 --> 35 <div class="row"> 36 <div class="col-md-4 col-md-offset-8"> 37 <button class="btn btn-primary">新增</button> 38 <button class="btn btn-danger">删除</button> 39 </div> 40 </div> 41 <!-- 显示表格数据 --> 42 <div class="row"> 43 <div class="col-md-12"> 44 <table class="table table-hover" id="emps_table"> 45 <thead> 46 <tr> 47 <th>#</th> 48 <th>empName</th> 49 <th>gender</th> 50 <th>email</th> 51 <th>deptName</th> 52 <th>操作</th> 53 </tr> 54 </thead> 55 <tbody> 56 57 58 </tbody> 59 60 </table> 61 </div> 62 </div> 63 64 <!-- 显示分页信息 --> 65 <div class="row"> 66 <!--分页文字信息 --> 67 <div class="col-md-6">当前页,总 68 页,总 条记录</div> 69 70 <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典--> 71 <script type="text/javascript"> 72 73 $(function(){ 74 75 $.ajax({ 76 url:"${APP_PATH}/emps", 77 data:"pn=1", 78 type:"GET", 79 dataType:"json", 80 success:function(result){ 81 //console.log(result); 82 //解析数据在表格中将员工数据显示出来 83 build_emps_table(result); 84 //解析数据在右下角将导航信息显示出来 85 } 86 }); 87 88 89 //解析服务器返回的json数据，并在员工表中显示出来 90 function build_emps_table(result){ 91 //第一步：获得所有的员工数据 92 var emps = result.extend.pageInfo.list; 93 //第二步：对员工数据进行遍历显示出来 94 $.each(emps,function(index,item){ 95 var empIdTd = $("<td></td>").append(item.empId); 96 var empNameTd = $("<td></td>").append(item.empName); 97 var gender = item.gender == 'M'?"男":"女"; 98 var genderTd = $("<td></td>").append(gender); 99 var emailTd = $("<td></td>").append(item.email); 100 var departmentNameTd = $("<td></td>").append(item.department.deptName); 101 //添加编辑按钮 102 var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn") 103 .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑"); 104 var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") 105 .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除"); 106 107 var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); 108 //将上面的table表td数据添加到tr中，这里是一个链式操作 109 $("<tr></tr>").append(empIdTd) 110 .append(empNameTd) 111 .append(genderTd) 112 .append(emailTd) 113 .append(departmentNameTd) 114 .append(btnTd) 115 .appendTo("#emps_table tbody"); 116 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典 117 118 119 }); 120 121 } 122 123 }); 124 125 126 </script> 127 128 </div> 129</body> 130</html>
数据的显示效果如下：
相当的经典
18、尚硅谷_SSM高级整合_查询_构建分页条.avi
上面我们在表格中将员工的数据显示出来了，接下面我们要构建右下角导航栏的显示
导航栏我们要参考bootstrap框架下的来进行封装
具体的index.jsp页面的代码如下所示：
1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5<html> 6<head> 7<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8<title>员工列表</title> 9<% 10String path = request.getContextPath(); 11String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 12%> 13<% 14 pageContext.setAttribute("APP_PATH", request.getContextPath()); 15%> 16<!-- web路径： 17不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。 18以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名 19 http://localhost:3306/crud 20 --> 21<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script> 22<link href="${APP_PATH }/static/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 23<script src="${APP_PATH}/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script> 24</head> 25<body> 26 <!-- 搭建显示页面 --> 27 <div class="container"> 28 <!-- 标题 --> 29 <div class="row"> 30 <div class="col-md-12"> 31 <h1>SSM-CRUD</h1> 32 </div> 33 </div> 34 <!-- 按钮 --> 35 <div class="row"> 36 <div class="col-md-4 col-md-offset-8"> 37 <button class="btn btn-primary">新增</button> 38 <button class="btn btn-danger">删除</button> 39 </div> 40 </div> 41 <!-- 显示表格数据 --> 42 <div class="row"> 43 <div class="col-md-12"> 44 <table class="table table-hover" id="emps_table"> 45 <thead> 46 <tr> 47 <th>#</th> 48 <th>empName</th> 49 <th>gender</th> 50 <th>email</th> 51 <th>deptName</th> 52 <th>操作</th> 53 </tr> 54 </thead> 55 <tbody> 56 57 58 </tbody> 59 60 </table> 61 </div> 62 </div> 63 64 <!-- 显示分页信息 --> 65 <div class="row"> 66 <!--分页文字信息 --> 67 <div class="col-md-6" id="page_info_area"></div> 68 <!-- 分页条信息 --> 69 <div class="col-md-6" id="page_nav_area"></div> 70 71 72 </div> 73</div> 74 75 <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典--> 76 <script type="text/javascript"> 77 78 $(function(){ 79 80 $.ajax({ 81 url:"${APP_PATH}/emps", 82 data:"pn=1", 83 type:"GET", 84 dataType:"json", 85 success:function(result){ 86 //console.log(result); 87 //解析数据在表格中将员工数据显示出来 88 build_emps_table(result); 89 //将左下角的分页信息显示出来 90 build_page_info(result); 91 //解析数据在右下角将导航信息显示出来 92 build_page_nav(result); 93 } 94 }); 95 96 97 //解析服务器返回的json数据，并在员工表中显示出来 98 function build_emps_table(result){ 99 //第一步：获得所有的员工数据 100 var emps = result.extend.pageInfo.list; 101 //第二步：对员工数据进行遍历显示出来 102 $.each(emps,function(index,item){ 103 var empIdTd = $("<td></td>").append(item.empId); 104 var empNameTd = $("<td></td>").append(item.empName); 105 var gender = item.gender == 'M'?"男":"女"; 106 var genderTd = $("<td></td>").append(gender); 107 var emailTd = $("<td></td>").append(item.email); 108 var departmentNameTd = $("<td></td>").append(item.department.deptName); 109 //添加编辑按钮 110 var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn") 111 .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑"); 112 var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") 113 .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除"); 114 115 var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); 116 //将上面的table表td数据添加到tr中，这里是一个链式操作 117 $("<tr></tr>").append(empIdTd) 118 .append(empNameTd) 119 .append(genderTd) 120 .append(emailTd) 121 .append(departmentNameTd) 122 .append(btnTd) 123 .appendTo("#emps_table tbody"); 124 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典 125 126 127 }); 128 129 } 130 131 //解析显示分页信息 132 function build_page_info(result){ 133 $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页,"+"总共"+result.extend.pageInfo.pages+"页,"+"总共"+ 134 result.extend.pageInfo.total+"条记录"); 135 136 } 137 //解析右下角的导航栏 138 function build_page_nav(result){ 139 //page_nav_area 140 $("#page_nav_area").empty(); 141 var ul = $("<ul></ul>").addClass("pagination"); 142 //构建元素 143 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#")); 144 var prePageLi = $("<li></li>").append($("<a></a>").append("«")); 145 var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); 146 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#")); 147 //添加首页和前一页 的提示 148 ul.append(firstPageLi).append(prePageLi); 149 //1,2，3遍历给ul中添加页码提示 150 $.each(result.extend.pageInfo.navigatepageNums,function(index,item){ 151 var numLi = $("<li></li>").append($("<a></a>").append(item)); 152 ul.append(numLi); 153 }); 154 //添加下一页和末页 的提示 155 ul.append(nextPageLi).append(lastPageLi); 156 //把ul加入到nav 157 var navEle = $("<nav></nav>").append(ul); 158 navEle.appendTo("#page_nav_area"); 159 } 160 161 }); 162 163 164 </script> 165 166 </div> 167</body> 168</html>
具体的页面显示效果如下：
19、尚硅谷_SSM高级整合_查询_分页显示完整细节.avi
主要实现下面的功能：
1、当前页面高亮显示
2、当点击页面的时候使用ajax重新到服务器去加载数据
1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5<html> 6<head> 7<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8<title>员工列表</title> 9<% 10String path = request.getContextPath(); 11String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 12%> 13<% 14 pageContext.setAttribute("APP_PATH", request.getContextPath()); 15%> 16<!-- web路径： 17不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。 18以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名 19 http://localhost:3306/crud 20 --> 21<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.js"></script> 22<link href="${APP_PATH }/static/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 23<script src="${APP_PATH}/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script> 24</head> 25<body> 26 <!-- 搭建显示页面 --> 27 <div class="container"> 28 <!-- 标题 --> 29 <div class="row"> 30 <div class="col-md-12"> 31 <h1>SSM-CRUD</h1> 32 </div> 33 </div> 34 <!-- 按钮 --> 35 <div class="row"> 36 <div class="col-md-4 col-md-offset-8"> 37 <button class="btn btn-primary">新增</button> 38 <button class="btn btn-danger">删除</button> 39 </div> 40 </div> 41 <!-- 显示表格数据 --> 42 <div class="row"> 43 <div class="col-md-12"> 44 <table class="table table-hover" id="emps_table"> 45 <thead> 46 <tr> 47 <th>#</th> 48 <th>empName</th> 49 <th>gender</th> 50 <th>email</th> 51 <th>deptName</th> 52 <th>操作</th> 53 </tr> 54 </thead> 55 <tbody> 56 57 58 </tbody> 59 60 </table> 61 </div> 62 </div> 63 64 <!-- 显示分页信息 --> 65 <div class="row"> 66 <!--分页文字信息 --> 67 <div class="col-md-6" id="page_info_area"></div> 68 <!-- 分页条信息 --> 69 <div class="col-md-6" id="page_nav_area"></div> 70 71 72 </div> 73</div> 74 75 <!-- 当页面加载完成之后发起ajax请求获得数据 ，不清楚的看锋利jquery教程相当的经典--> 76 <script type="text/javascript"> 77 78 $(function(){ 79 //页面加载完毕，去首页获得对应的数据 80 to_page(1); 81 82 }); 83 84 85 //使用ajax到后台服务器查询数据 86 function to_page(pn){ 87 $.ajax({ 88 url:"${APP_PATH}/emps", 89 data:"pn="+pn, 90 type:"GET", 91 success:function(result){ 92 //console.log(result); 93 //1、解析并显示员工数据 94 build_emps_table(result); 95 //2、解析并显示分页信息 96 build_page_info(result); 97 //3、解析显示分页条数据 98 build_page_nav(result); 99 } 100 }); 101 } 102 103 104 105 //解析服务器返回的json数据，并在员工表中显示出来 106 function build_emps_table(result){ 107 //在构建之前先清空所有的数据 108 $("#emps_table tbody").empty(); 109 //第一步：获得所有的员工数据 110 var emps = result.extend.pageInfo.list; 111 //第二步：对员工数据进行遍历显示出来 112 $.each(emps,function(index,item){ 113 var empIdTd = $("<td></td>").append(item.empId); 114 var empNameTd = $("<td></td>").append(item.empName); 115 var gender = item.gender == 'M'?"男":"女"; 116 var genderTd = $("<td></td>").append(gender); 117 var emailTd = $("<td></td>").append(item.email); 118 var departmentNameTd = $("<td></td>").append(item.department.deptName); 119 //添加编辑按钮 120 var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn") 121 .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑"); 122 var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn") 123 .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除"); 124 125 var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); 126 //将上面的table表td数据添加到tr中，这里是一个链式操作 127 $("<tr></tr>").append(empIdTd) 128 .append(empNameTd) 129 .append(genderTd) 130 .append(emailTd) 131 .append(departmentNameTd) 132 .append(btnTd) 133 .appendTo("#emps_table tbody"); 134 //"#emps_table tbody"表示选取id为emps_table下的所有的<tbody>的元素，不清楚的看锋利的jquery书籍相当的经典 135 136 137 }); 138 139 } 140 141 //解析显示分页信息 142 function build_page_info(result){ 143 $("#page_info_area").empty(); 144 $("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+"页,"+"总共"+result.extend.pageInfo.pages+"页,"+"总共"+ 145 result.extend.pageInfo.total+"条记录"); 146 147 } 148 //解析右下角的导航栏 149 function build_page_nav(result){ 150 //page_nav_area 151 $("#page_nav_area").empty(); 152 var ul = $("<ul></ul>").addClass("pagination"); 153 //构建元素 154 var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#")); 155 var prePageLi = $("<li></li>").append($("<a></a>").append("«")); 156 //判断是否有前一页，如果没有前一页就不能点击 157 if(result.extend.pageInfo.hasPreviousPage == false){ 158 firstPageLi.addClass("disabled"); 159 prePageLi.addClass("disabled"); 160 } 161 //给前一页和首页添加按钮点击事件 162 firstPageLi.click(function(){ 163 to_page(1); 164 165 }); 166 167 prePageLi.click(function(){ 168 //跳转到当前页的前一页 169 to_page(result.extend.pageInfo.pageNum-1); 170 171 }); 172 173 var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); 174 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#")); 175 176 //如果没有下一页不能被点击 177 if(result.extend.pageInfo.hasNextPage == false){ 178 nextPageLi.addClass("disabled"); 179 lastPageLi.addClass("disabled"); 180 } 181 182 //给下一页和尾页添加点击事件 183 nextPageLi.click(function(){ 184 to_page(result.extend.pageInfo.pageNum+1); 185 }); 186 187 lastPageLi.click(function(){ 188 to_page(result.extend.pageInfo.pages); 189 }); 190 191 //添加首页和前一页 的提示 192 ul.append(firstPageLi).append(prePageLi); 193 //1,2，3遍历给ul中添加页码提示 194 $.each(result.extend.pageInfo.navigatepageNums,function(index,item){ 195 var numLi = $("<li></li>").append($("<a></a>").append(item)); 196 //判断当前遍历的如果是当前正在显示的页面，应该高亮显示 197 if(result.extend.pageInfo.pageNum == item){ 198 numLi.addClass("active"); 199 } 200 //添加点击事件 201 numLi.click(function(){ 202 //点击的时候重新使用ajax到服务器查询数据 203 to_page(item); 204 }); 205 ul.append(numLi); 206 }); 207 //添加下一页和末页 的提示 208 ul.append(nextPageLi).append(lastPageLi); 209 //把ul加入到nav 210 var navEle = $("<nav></nav>").append(ul); 211 navEle.appendTo("#page_nav_area"); 212 } 213 214 215 216 217 </script> 218 219 </div> 220</body> 221</html>
代码显示的效果如下所示：
项目代码的下载地址为：