分页查询的具体实现
导读：
本案例主要是熟悉ajax+json这种前后端交互的模式，网页端使用ajax发送请求，服务器则返回json数据，这样做的好处，就是降低开发耦合性，真正实现跨平台开发（浏览器，ios，安卓等）
（1）首先就来效果展示
数据图查询的数据，页面展示
点击页面上的新增，删除等按钮会弹出模态框
（2）实现流程
首先，保证controller里返回的是json数据
@RequestMapping(value="/userList",method=RequestMethod.GET)
@ResponseBody
public Map<String, Object> getAllUser(@RequestParam(value="pn",defaultValue="1") Integer pn) {
//startPage是PageHelper的静态方法，参数1：默认开始页面，参数2：每页显示数据的条数
PageHelper.startPage(pn, 5);
//从当前类下注入的业务层实现类userService中调用方法，该方法所在类利用注入的userDao来调用真正的查询方法查询数据库信息。
List<User> allUser = userService.getAllUser();
System.out.println(allUser);
//使用PageInfo包装查询页面，封装了详细的分页信息.第二个参数表示连续显示的页数
PageInfo page = new PageInfo(allUser,5);
Map<String, Object> map = new HashMap<String, Object>();
map.put("pageInfo", page);
return map;
}然后，剩下的就是解析json数据，在页面显示了，这一步主要用到的几个知识点jQuery，bootstrap框架，pageHelper技术。
1.先看一下区域布局图
再看一下，服务器返回的给浏览器的jason数据
2.让页面加载的时候就访问页面首页
$(function(){
toSomePage(1);
});
/**
每次调用此函数都发送一次请求，变量为访问的页码pn
*/
function toSomePage(pn){
$.ajax({
url:"${pageContext.request.contextPath}/userList.do",
data:"pn="+pn,
type:"GET",
success:function(result){
build_user_table(result);//构建用户表格
build_pagination_info(result);//构建分页信息
build_pagination_nav(result)//构建分页导航
}
});
}解析服务器返回的json数据之list用户列表：
点我，查看bootstrap官方文档对表格的介绍
/**
创建一张用户表显示读取的数据
*/
function build_user_table(result){
//先清空表格，不然会直接回追加到上次查询结果上
$("#user_table tbody").empty();
var users = result.pageInfo.list;//获取服务器返回的json数据
$.each(users,function(index,element){//$.each()是jquery的遍历方法
//$("解析服务器返回的json数据之分页信息：
/**
创建分页信息
*/
function build_pagination_info(result){
$("#page_info_area").empty();
//得到服务器返回的jason数据里的分页信息，然后拼接
var pageNum =result.pageInfo.pageNum;
var pages = result.pageInfo.pages;
var total = result.pageInfo.total;
$("#page_info_area").append("当前"+pageNum+"页,共"+pages+"页,总"+total+"条记录");
}解析服务器返回的json数据之分页导航条：
点我，查看bootstrap官方文档对分页的介绍
/**
创建分页导航条：
根据bootstrap文档里的分页说明，使用jquery创建元素。
*/
function build_pagination_nav(result){
$("#page_nav_area").empty();
//首页
var fristPageLi = $("").append($("").attr("href","#").append("首页"));
//前一页
var prePageLi = $("").append($("").attr("href","#").append($("").append("«")));
//如果没有前一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
if(result.pageInfo.hasPreviousPage == false){
fristPageLi.addClass("disable");
prePageLi.addClass("disable");
}
else{
fristPageLi.click(function(){
toSomePage(1);
});
prePageLi.click(function(){
toSomePage(result.pageInfo.pageNum -1);
});
}
var ul = $("
").addClass("pagination").append(fristPageLi).append(prePageLi);
$.each(result.pageInfo.navigatepageNums,function(index,element){
var numLi = $("").append($("").attr("href","#").append(element));
//如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
if(result.pageInfo.pageNum==element){
numLi.addClass("active");
}
numLi.click(function(){
toSomePage(element);
})
ul.append(numLi);
})
//下一页
var nextPageLi = $("").append($("").attr("href","#").append($("").append("»")));
//末页
var lastPageLi = $("").append($("").attr("href","#").append("末页"));
//如果没有后一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
if(result.pageInfo.hasNextPage == false){
nextPageLi.addClass("disable");
lastPageLi.addClass("disable");
}
else{
nextPageLi.click(function(){
toSomePage(result.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
toSomePage(result.pageInfo.pages);
});
}
ul.append(nextPageLi).append(lastPageLi);
$("").append(ul).appendTo("#page_nav_area");
}3.这里给出我页面布局代码：
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>用户管理页面h1>
div>
div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#add_user_model">新增button>
<button type="button" class="btn btn-danger " data-toggle="modal" data-target="#add_user_model">删除button>
div>
div>
<div class="row">
<table class="table table-hover" id="user_table">
<thead>
<tr>
<th>用户idth>
<th>用户名th>
<th>密码th>
<th>操作th>
tr>
thead>
<tbody>
tbody>
table>
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>（3）功能：点击增加按钮，当前页面中弹出模态框
点我，查看bootstrap官方文档对模态框的介绍
下面是我的代码（基本没怎么改过示例代码），在模态体body里我还加了个表格，
效果就像我在文章开头展示的那样
<div class="modal fade" id="add_user_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
<h4 class="modal-title">新增用户h4>
div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="用户名">
div>
div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="密码">
div>
div>
form>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
<button type="button" class="btn btn-primary">确定button>
div>
div>
div>
div>（4）user_list.jsp全部代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理页面title>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
<script type="text/javascript">
$(function(){
toSomePage(1);
});
/**
每次调用此函数都发送一次请求，变量为访问的页码pn
*/
function toSomePage(pn){
$.ajax({
url:"${pageContext.request.contextPath}/userList.do",
data:"pn="+pn,
type:"GET",
success:function(result){
build_user_table(result);//构建用户表格
build_pagination_info(result);//构建分页信息
build_pagination_nav(result)//构建分页导航
}
});
}
/**
创建一张用户表显示读取的数据
*/
function build_user_table(result){
//先清空表格，不然会直接回追加到上次查询结果上
$("#user_table tbody").empty();
var users = result.pageInfo.list;//获取服务器返回的json数据
$.each(users,function(index,element){//$.each()是jquery的遍历方法
//$("
").addClass("pagination").append(fristPageLi).append(prePageLi);
$.each(result.pageInfo.navigatepageNums,function(index,element){
var numLi = $("").append($("").attr("href","#").append(element));
//如果遍历的页码等于当前页面，就高亮显示，然后添加点击事件，如果有点击，就重新发送ajax请求，访问当前页面（pn=element）
if(result.pageInfo.pageNum==element){
numLi.addClass("active");
}
numLi.click(function(){
toSomePage(element);
})
ul.append(numLi);
})
//下一页
var nextPageLi = $("").append($("").attr("href","#").append($("").append("»")));
//末页
var lastPageLi = $("").append($("").attr("href","#").append("末页"));
//如果没有后一页，就让按钮不能被点击,否则绑定点击事件，重新发送ajax请求，访问相应页面
if(result.pageInfo.hasNextPage == false){
nextPageLi.addClass("disable");
lastPageLi.addClass("disable");
}
else{
nextPageLi.click(function(){
toSomePage(result.pageInfo.pageNum +1);
});
lastPageLi.click(function(){
toSomePage(result.pageInfo.pages);
});
}
ul.append(nextPageLi).append(lastPageLi);
$("").append(ul).appendTo("#page_nav_area");
}
script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>用户管理页面h1>
div>
div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#add_user_model">新增button>
<button type="button" class="btn btn-danger " data-toggle="modal" data-target="#add_user_model">删除button>
div>
div>
<div class="row">
<table class="table table-hover" id="user_table">
<thead>
<tr>
<th>用户idth>
<th>用户名th>
<th>密码th>
<th>操作th>
tr>
thead>
<tbody>
tbody>
table>
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>
<div class="modal fade" id="add_user_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
<h4 class="modal-title">新增用户h4>
div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="用户名">
div>
div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码label>
<div class="col-sm-10">
<input type="text" class="form-control" id="password" placeholder="密码">
div>
div>
form>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
<button type="button" class="btn btn-primary">确定button>
div>
div>
div>
div>
body>
html>