项目框架：
####实体类：User.java
package com.test.entity;
import java.util.Date;
import com.test.util.DateUtils;
/**
* 实体类 User
*/
public class User {
private int id;
private String username;
private String password;
private String phone;
public String subtime;
public String getSubtime() {
return subtime;
}
public void setSubtime(Date subtime) {
this.subtime = DateUtils.format(subtime,"yyyy-MM-dd");
}
public User() {
super();
}
public User(int id, String username, String password, String phone, String subtime) {
super();
this.id = id;
this.username = username;
this.password = password;
this.phone = phone;
this.subtime = subtime;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
####工具类：page.java
package com.test.util;
import java.util.List;
/**
* 分页的工具类
*/
public class Page<T> {
private int pageSize=6; //页大小
private int pageIndex=0; //当前页号
private int totalPageCount=0; //总页数
private int record=0; //记录总数
private Integer nextPage; //下一页
private Integer prePage; //上一页
private List<T> datalist; //集合
public List<T> getDatalist() {
return datalist;
}
public void setDatalist(List<T> datalist) {
this.datalist = datalist;
}
//得到开始记录数
public int getSartRow(){
return (pageIndex-1)*pageSize;
}
//得到结束记录数
public int getEndRow(){
return pageSize;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPageIndex() {
return pageIndex;
}
//得到当前页
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
//下一页
setNextPage();
//上一页
setPrePage();
}
public int getTotalPageCount() {
return totalPageCount;
}
//总页数
public void setTotalPageCount() {
int totalP = record % getPageSize() == 0 ? record / getPageSize() :
record/ getPageSize() + 1;
this.totalPageCount = totalP;
}
public int getRecord() {
return record;
}
//总记录数
public void setRecord(int record) {
this.record = record;
//设置总页数
setTotalPageCount();
}
public Integer getNextPage() {
return nextPage;
}
//设置下一页
public void setNextPage() {
this.nextPage = this.pageIndex+1;
}
public Integer getPrePage() {
return prePage;
}
//设置上一页
public void setPrePage() {
this.prePage =this.pageIndex-1;
if(this.prePage<1){
this.prePage=1;
}
}
}
**.xml映射文件：UserMapper.xml **
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.test.mapper.UserMapper" >
<sql id="Base_Column_List" >
id, username, password, phone,subtime
</sql>
<!-- 获取分页总记录数 -->
<select id="getPageCount" resultType="int" parameterType="string">
select count(0) from tb_user
<where>
<if test="username != null and username != ''">
and username like CONCAT(CONCAT('%',#{username},'%'))
</if>
</where>
</select>
<!-- 分页 带搜索条件-->
<select id="findPagePrerequisite" resultType="User" parameterType="string">
select <include refid="Base_Column_List" /> from tb_user
<where>
<if test="username != null and username != ''">
and username like CONCAT(CONCAT('%',#{username},'%'))
</if>
</where>
limit #{stratRow},#{endRow}
</select>
</mapper>
Dao层接口： UserMapper.java
package com.test.mapper;
import java.util.HashMap;
import java.util.List;
import com.test.entity.User;
public interface UserMapper {
/**
* 获取总记录条数
*/
int getPageCount(User user);
/**
* 分页 带查询条件
*/
List<User> findPagePrerequisite(HashMap<String,Object> map);
}
Service 接口： UserService.java
package com.test.service;
import com.test.entity.User;
import com.test.util.Page;
public interface UserService {
/**
* 获取总记录条数
*/
int getPageCountService(User user);
/**
* 分页 带查询条件
*/
Page<User> findPagePrerequisiteService(User user,int pageIndex);
}
ServiceImpl 实现类： UserServiceImpl.java
ServiceImpl 实现类：调用mapper（dao）接口
package com.test.service.impl;
import java.util.HashMap;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.test.entity.User;
import com.test.mapper.UserMapper;
import com.test.service.UserService;
import com.test.util.Page;
@Service
public class UserServiceImpl implements UserService {
//调用dao接口
@Autowired
private UserMapper userMapper;
/**
* 获取分页总记录条数
*/
public int getPageCountService(User user) {
int pageCount = userMapper.getPageCount(user);
return pageCount;
}
/**
* 分页 带查询条件
*/
public Page<User> findPagePrerequisiteService(User user,int pageIndex) {
HashMap<String,Object> map = new HashMap<String,Object>();
Page<User> page = new Page<User>();
//当前页
page.setPageIndex(pageIndex);
//封装总记录数
int getCount = userMapper.getPageCount(user);
page.setRecord(getCount);
//封装查询条件
map.put("username", user.getUsername());
//分页
map.put("stratRow", page.getSartRow());
map.put("endRow", page.getEndRow());
//封装每页显示的数据，调用分页方法，把map值传进去
List<User> fileList = userMapper.findPagePrerequisite(map);
page.setDatalist(fileList);
return page;
}
}
Controller 类：UserController.java
package com.test.controller;
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.ResponseBody;
import com.test.entity.User;
import com.test.service.UserService;
import com.test.util.Page;
@Controller
@RequestMapping("/usercont")
public class UserController {
//调用Service接口
@Autowired
private UserService fileService;
/**
* 获取总记录条数
*/
@RequestMapping("/getPageCount")
@ResponseBody
public int getPageCount(User users) {
int count = fileService.getPageCountService(users);
return count;
}
/**
* 分页 带查询条件
*/
@RequestMapping("/page")
@ResponseBody
public Page<User> findPagePrerequController(User users, int pageIndex){
Page<User> page = new Page<User>();
page = fileService.findPagePrerequisiteService(users,pageIndex);
return page;
}
}
####前台页面展示：index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- bootstrap 基本引用 -->
<link rel='stylesheet' href='<%=path%>/css/bootstrap.css' type='text/css' />
<link rel='stylesheet' href='<%=path%>/css/style.css' type='text/css' />
<script src='<%=path%>/js/jquery-1.10.2.min.js'></script>
<script src='<%=path%>/js/bootstrap.min.js'></script>
<script type='text/javascript' src='<%=path%>/js/jquery.SuperSlide.2.1.1.js'></script>
<!-- 时间控件 -->
<link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="<%=path%>/css/daterangepicker/daterangepicker-bs3.css"/>
<script type="text/javascript" src="<%=path%>/js/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/daterangepicker/daterangepicker.js"></script>
<!-- 分页 -->
<script type="text/javascript" src="<%=path%>/js/jqPaginator/jqPaginator.js"></script>
</head>
<body>
<div id="top1">
<div class="scd clearfix" id="top2" >
<!-- 右边 -->
<div class="scd_r" id="xzb" >
<div class="r_name" id="showDeptDesc">
<span>Ajax分页</span>
</div>
<form class="form-inline" >
<!-- 上面查询条件 -->
<div class="panel-body" id="depts4" >
<div id="toolbar" class="btn-group" style="margin-left: 5px;">
<!-- 搜索框 -->
<div class="form-group">
<input type="text" class="form-control" id="usernameId" name="username" value="" style="width: 230px;" placeholder="请输入关键字" />
</div>
<!-- 时间-->
<div class="form-group">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 220px;margin: 0px;font-size: 15px;"
name="reservation" id="reservation" class="form-control" value="2017-01-01 ~ 2017-02-01" readonly="readonly"/>
</div>
</div>
</div>
</fieldset>
</div>
<!-- 提交按钮 -->
<div class="form-group">
<button type="button" class="btn btn-default" id="sousuo" style="width: 80px;" onclick="subForm()">查询</button>
</div>
</div>
</div>
<!-- 表格 -->
<div class="about1">
<table class="table" id="tables" style="margin-bottom: 10px;">
<thead>
<th style="width: 35px;padding-left: 20px;">序号</th>
<th style="text-align: center;width: 110px;">用户名</th>
<th style="text-align: center;width: 100px;">密码</th>
<th style="text-align: center;width: 100px;">电话</th>
<th style="text-align: center;width: 100px;">提交时间</th>
</thead>
<tbody id="showtable">
</tbody>
</table>
<div id="pags">
<!-- 分页 -->
<div id="pagination" style="float:left;"></div>
<div id="showpagecount" style="display: inline-block;margin-left: 20px;height: 35px;line-height: 35px;"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//提交事件
function subForm(){
//获取输入框值
var usernameCont=$("#usernameId").val();
$.ajax({
url:"usercont/getPageCount",
data:{
username:usernameCont
},
async: false,
type:"post",
dataType:"json",
success:function(data){
if (data!=0) {
//分页插件
$.jqPaginator('#pagination', {
totalCounts:data,//总条目数
pageSize:6,//每一页的条目数，要跟page类里值一样，不然显示的值对不上
visiblePages:9,//最多显示的页码数
currentPage: 1,//当前的页码
wrapper:'<ul class="pagination" style="display: inline-block;padding-left: 0; margin: 0;border-radius: 4px;"></ul>',
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">页尾</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (pageIndex) {
$.ajax({
url:"usercont/page",
async: false,
data:{
pageIndex:pageIndex,
username:usernameCont
},
type:"post",
dataType:"json",
success:function(data){
totalData = data.record;
pageCount = data.totalPageCount;
var showTableHtml = "";
$.each(data.datalist,function(i,item){
showTableHtml += "<tr>"+
"<td style=\"padding-left: 20px;\">"+item.id+"</td>"+
"<td style='text-align: center;'>"+item.username+"</td>"+
"<td style='text-align: center;'>"+item.password+"</td>"+
"<td style='text-align: center;'>"+item.phone+"</td>"+
"<td style='text-align: center;'>"+item.subtime+"</td>";
});
$("#showtable").html(showTableHtml);
//显示分页数字
$("#showpagecount").html("<span> 共"+pageCount+"页，"+totalData+"条</span>");
//显示分页div块
$("#pags").css("display","inline-block");
},
error:function(){
$("#showtable").html("<tr><td style='padding: 160px;text-align: center;' colspan='5'>网络异常...</td></tr>");
//隐藏分页div块
$("#pags").css("display","none");
}
});
}
});
}else{
$("#showtable").html("<tr><td style='padding: 160px;text-align: center;' colspan='5'>暂无数据</td></tr>");
//隐藏分页div块
$("#pags").css("display","none");
}
},
error:function(){
$("#showtable").html("<tr><td style='padding: 160px;text-align: center;' colspan='5'>网络异常...</td></tr>");
//隐藏分页div块
$("#pags").css("display","none");
}
});
}
function init(){
$.ajax({
url:"usercont/getPageCount",
async: false,
type:"post",
dataType:"json",
success:function(data){
//分页插件
$.jqPaginator('#pagination', {
totalCounts:data,//总条目数
pageSize:6,//每一页的条目数
visiblePages:9,//最多显示的页码数
currentPage: 1,//当前的页码
wrapper:'<ul class="pagination" style="display: inline-block;padding-left: 0; margin: 0;border-radius: 4px;"></ul>',
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">页尾</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (pageIndex) {
$.ajax({
url:"usercont/page",
async: false,
data:{
pageIndex:pageIndex
},
type:"post",
dataType:"json",
success:function(data){
totalData = data.record;
pageCount = data.totalPageCount;
var showTableHtml = "";
$.each(data.datalist,function(i,item){
showTableHtml += "<tr>"+
"<td style=\"padding-left: 20px;\">"+item.id+"</td>"+
"<td style='text-align: center;'>"+item.username+"</td>"+
"<td style='text-align: center;'>"+item.password+"</td>"+
"<td style='text-align: center;'>"+item.phone+"</td>"+
"<td style='text-align: center;'>"+item.subtime+"</td>";
});
$("#showtable").html(showTableHtml);
//显示分页数字
$("#showpagecount").html("<span> 共"+pageCount+"页，"+totalData+"条</span>");
},
error:function(){
$("#showtable").html("<tr><td style='padding: 160px;text-align: center;' colspan='5'>网络异常...</td></tr>");
//隐藏分页div块
$("#pags").css("display","none");
}
});
}
});
},
error:function(){
$("#showtable").html("<tr><td style='padding: 160px;text-align: center;' colspan='5'>网络异常...</td></tr>");
//隐藏分页div块
$("#pags").css("display","none");
}
});
}
$(function() {
//初始化分页
init();
//时间
$('#reservation').daterangepicker(
{
timePicker24Hour: true,
format: 'YYYY-MM-DD',
minDate:"2010-01-01",
maxDate:new Date(),
startDate: new Date(),
endDate: new Date(),
showDropdowns:true,
separator: ' ~ ',
locale : {
customRangeLabel : '自选时间',
daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ]
}
},
function(start, end, label) {
// alert("开始时间："+start.format('YYYY-MM-DD'));
//alert("结束时间："+ end.format('YYYY-MM-DD'));
});
});
</script>
</html>
####显示效果：如图1（这个是还没加时间搜索条件的，下面加上）
图1
####这里用了一个时间控件daterangepicker，喜欢的可以自行搜搜看
1、首先在User.java实体类添加：beginTime和endTime两个字段
2、在UserMapper.xml映射文件中添加条件
3、在UserServiceImpl.java实现类中，把beginTime和endTime加进map中
4、在前台页面传值：index.jsp
最后展示：如图2
项目地址：ssm_ajax_page
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
