查詢-返回分頁的json數據
ajax查詢過程
- index.jsp頁面直接發送ajax請求進行員工分頁數據的查詢
- 服務器將查出的數據，以json字符串的形式返回給瀏覽器
- 瀏覽器收到js字符串。可以使用js對json進行解析，使用js通過dom增刪改改變頁面。
- 返回json。實現客戶端的無關性。
添加json支持
在pom.xml中添加：
<!-- 返回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>
修改EmployeeMapper.java
主要是添加了getEmpsWithJson方法
package com.liantao.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.liantao.crud.bean.Employee;
import com.liantao.crud.bean.Msg;
import com.liantao.crud.service.EmployeeService;
/**
* 處理員工的crud請求
* @author liantao.me
*
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/**
* 需導入jackson包
* @param pn
* @return
*/
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn){
//引入PageHelper分頁插件
//查詢之前需要調用,,傳入頁碼，以及每頁的大小
PageHelper.startPage(pn,5);
//startPage后面緊跟的是這個查詢就是一個分頁查詢
List<Employee> emps = employeeService.getAll();
//使用pageInfo包裝查詢后的結果，只需要將Pageinfo交給頁面就行了
//封裝了詳細的分頁信息，包括我們查出來的數據,傳入連續顯示的數據
PageInfo page = new PageInfo(emps,5);
return Msg.success().add("pageInfo",page);
}
/*
* 查詢員工數據（分頁查詢）
* @return
*/
//@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
//引入PageHelper分頁插件
//查詢之前需要調用,,傳入頁碼，以及每頁的大小
PageHelper.startPage(pn,5);
//startPage后面緊跟的是這個查詢就是一個分頁查詢
List<Employee> emps = employeeService.getAll();
//使用pageInfo包裝查詢后的結果，只需要將Pageinfo交給頁面就行了
//封裝了詳細的分頁信息，包括我們查出來的數據,傳入連續顯示的數據
PageInfo page = new PageInfo(emps,5);
model.addAttribute("pageInfo",page);
return "list";
}
}
在bean包中添加Msg.java文件
package com.liantao.crud.bean;
import java.util.HashMap;
import java.util.Map;
public class Msg {
//狀態碼 100=success 200=fail
private int code;
//提示信息
private String msg;
//用戶要返回給瀏覽器的數據
private Map<String, Object> extend = new HashMap();
public static Msg success(){
Msg result = new Msg();
result.setCode(100);
result.setMsg("處理成功");
return result;
}
public static Msg fail(){
Msg result = new Msg();
result.setCode(200);
result.setMsg("處理失敗");
return result;
}
public Msg add(String key,Object value){
this.getExtend().put(key, value);
return this;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
啟動項目，運行結果：
另外，補充知識：
@ResponseBody注解詳解:SpirngMVC @ResponseBody
編寫頁面
首先，原來的index.jsp重命名為index2.jsp(也就是不用了的意思），再新建一個index.jsp，並把list.jsp的內容復制進來
修改index.jsp 頁面如下（主要是ajax 和 jq 的編寫）：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>員工列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 引入jquery -->
<script type="text/javascript" src="${path}/ssm-crud/static/js/jquery-1.12.4.js"></script>
<!-- 引入css、js -->
<link href="${path}/ssm-crud/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${path}/ssm-crud/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 標題 -->
<div class="row">
<div class="col-md-12">
<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>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 顯示分頁信息 -->
<div class="row">
<!-- 分頁文字信息 -->
<div class="col-md-6" id="page_info_area">
</div>
<!-- 分頁條信息 -->
<div class="col-md-6" id="page_nav_area">
</div>
</div>
</div>
<script type="text/javascript">
//1.頁面加載完成以后，直接去發送一個ajax請求，要到分頁數據
$(function(){
//去首頁
to_page(1);
});
function to_page(pn){
$.ajax({
url:"${path}/ssm-crud/emps",
data:"pn="+pn,
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){
//清空table表格
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps,function(index,item){
//alert(item.empName);
var emIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?'男':'女');
var mailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
/**
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
編輯
</button>
**/
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//append方法執行完成以后還是返回原來的元素
$("<tr></tr>").append(emIdTd)
.append(empNameTd)
.append(genderTd)
.append(mailTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
//解析顯示分頁信息
function build_page_info(result){
//清空table表格
$("#page_info_area").empty();
$("#page_info_area").append("當前"+result.extend.pageInfo.pageNum+"頁,總"+
result.extend.pageInfo.pages+"頁,總"+
result.extend.pageInfo.total+"條記錄");
}
//解析顯示分頁條,點擊分頁要能去下一頁
function build_page_nav(result){
//清空#page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//構建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//為元素添加點擊翻頁
firstPageLi.click(function(){
to_page(1);
})
prePageLi.click(function(){
to_page(result.extend.pageInfo.pageNum-1);
})
}
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var laststPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
laststPageLi.addClass("disabled");
}else{
//為元素添加點擊翻頁
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
})
laststPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
})
}
//添加首頁和前一頁的顯示
ul.append(firstPageLi).append(prePageLi);
//1,2,..5遍歷給ul中添加頁碼提示
$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item));
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
numLi.click(function(){
to_page(item);
})
ul.append(numLi);
})
//添加下一頁和末頁的提示
ul.append(nextPageLi).append(laststPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
</script>
</body>
</html>
最后一個，在MyBatis-config.xml中添加pageHelper插件的一個默認參數：
pageHelper文檔地址：pageHelper
reasonable：分頁合理化參數，默認值為false。當該參數設置為 true 時，pageNum<=0 時會查詢第一頁，
pageNum>pages（超過總數時），會查詢最后一頁。默認false 時，直接根據參數進行查詢。
MyBatis-config.xml ：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<!-- 駝峰命名規則 -->
<setting name="mapUnderscoreToCamelCase" value="true"></setting>
</settings>
<typeAliases>
<package name="com.liantao.crud.bean"></package>
</typeAliases>
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!-- 分頁參數合理化 -->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
</configuration>
通過ajax查詢數據分頁展示部分完成~
效果：
END