springmvc+mybatis+mysql的分页的查询和显示
第一次写这么长的博客,经验不足,疏忽难免,有问题可随时交流,共同进步(有问题请评论)
一,应用场景
后端:springmvc+mybatis+mysql
前端:html+css+jquery+ajax
二,后端代码Demo
1,用户实体类
public class User{
private String name;
private String mail;
private String department;
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getName(){
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMail() {
return mail;
}
public void setMail(String mail) {
this.mail = mail;
}
}
2,页面Pagination类
public class Pagination {
private int totalCount;//总记录条数
private int totalPage;//总页码
private int pageSize;//页面大小
private int pageNo;//当前第几页
private List rows;//返回记录条数
private int startRow;
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
if (this.pageSize == 0) {//默认一页显示10条记录
this.pageSize = 10;
}
if (this.pageNo == 0) { //默认显示第一页
this.pageNo = 1;
}
//计算总页数
if(totalCount>0){
int tPage = totalCount / this.pageSize;//总记录数除以页面大小计算总页数
if (totalCount > tPage * this.pageSize) {//有余数,总页数加1
tPage += 1;
}
this.totalPage = tPage;
}else{//总记录数等于0
this.pageNo = 1;
this.startRow=0;
this.totalPage=0;
}
//计算当前开始行
int startRow =(this.pageNo-1)*this.pageSize;
this.startRow = startRow;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getPageSize() {
if (this.pageSize == 0) {
this.pageSize = 10;
}
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPageNo() {
if (this.pageNo == 0) {
this.pageNo = 1;
}
return pageNo;
}
public void setPageNo(int pageNo) {
this.pageNo = pageNo;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
public int getStartRow() {
return startRow;
}
public void setStartRow(int startRow) {
this.startRow = startRow;
}
}
3,接收前端数据的类
public class UserVo{
private Pagination page;
private String department;
public Pagination getPage() {
return page;
}
public void setPage(Pagination page) {
this.page = page;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
}
4,数据库层分页查询代码
<pre name="code" class="html"><?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="UserDao"><pre name="code" class="html"> <select id="getUser" parameterType="String" resultType="User">
select name,mail
from userTable
where department = #{department}
limit #{page.startRow,jdbcType=INTEGER},#{page.pageSize,jdbcType=INTEGER}
</select><pre name="code" class="html"><!-- 统计符合条件的记录总数 -->
<select id="countUser" parameterType="String" resultType="int">
select count(name)
from userTable
where department = #{department}
</select><pre name="code" class="html"></mapper>
5,数据库dao层
public interface UserDao {
List<User> getUser(String department);
int countUser(String department);
}
6,service层
public interface UserService{
<span style="white-space:pre"> </span>List<User> getUser(UserVo userVo);
}
7service实现层
@Service
public interface UserServiceImpl implenents UserService{
@Autowiredprivate UserDao userDao;
public List<User> getUser(UserVo userVo){
if (userVo.getPage() == null) {
userVo.setPage(new Pagination());
}
Integer rows = userDao.countUser(userVo);
userVo.getPage().setTotalCount(rows);
Pagination page = clientVersionVo.getPage();
List<ClientVersionVo> list = userDao.getUser(userVo);
return list;
}
8,controller层
@Controller
@RequestMapping("/user")
public class ClientVersionController {
@Autowired
private UserService userService;
@RequestMapping(value="/inquire", method = RequestMethod.POST )
public List<User> inquire (HttpServletRequest request, HttpServletResponse response,UserVo userVo){
List<User> userList = userService.getUser( userVo);
return userList;
}
}
三前端代码
1,html代码
<html>
<head>
<title>分页查询demo</title>
</head>
<body>
<input id="department" placeholder="请输入要查询的部门信息" type="text" ><button id="inquireBtn" class="btn">查询</button><pre name="code" class="html"><!-- 显示查询结果 -->
<table >
<tr >
<th style="text-align: center">序号</th>
<th style="text-align: center">姓名</th>
<th style="text-align: center">邮箱</th>
<th style="text-align: center">部门</th>
</tr>
<tbody id="resultTbody">
</tbody>
</table>
<span style="white-space:pre"> </span><!-- 分页组件 -->
<div class="search-footer">
<div id="pageBar"></div>
</div><pre name="code" class="html"></body>
<script src="#springUrl('')/static/js/pageBar.js"></script><script src="#springUrl('')/static/js/user.js"></script></html>
2,pageBar.js代码
var pageBar={
//pageCount 总页数， currentPage 当前页数
startIndex:0,
endIndex:0,
currentIndex:1,
deviation:5,
pageInit:function(pageCount,currentPage,totalCount,eventFun,deviation){
//当前页面
pageBar.currentIndex =currentPage;
pageBar.clickPage=eventFun;
var htmlStr= "";
var back=pageBar.currentIndex-1;
if(pageBar.currentIndex > 1){
back=pageBar.currentIndex-1;
htmlStr +="<span class=\"home\" onclick='pageBar.clickPage(1)'><s></s></span>";
htmlStr +="<span class=\"pre-btn\" onclick='pageBar.clickPage("+back+")'><s></s></span>";
}else{
htmlStr +="<span class=\"home disabled\"><s></s></span>";
htmlStr +="<span class=\"pre-btn disabled\"><s></s></span>";
}
htmlStr+="<input type=\"text\" onkeypress='pageBar.goPage(this)' value=\""+ currentPage +"\" class=\"page-input center\"/> / <span>"+ pageCount +" </span>";
<span style="white-space:pre"> </span>htmlStr+="<input type=\"hidden\" id=\"pageNo\" value=\""+currentPage+"\"/>";
htmlStr += "页， <font>共"+totalCount+"条 </font>";
if(pageBar.currentIndex!=pageCount && pageCount > 0){
var nextPage=back;
nextPage= nextPage+2;
htmlStr += "<span class=\"next-btn\" onclick='pageBar.clickPage("+nextPage+")'><s></s></span>";
htmlStr += "<span class=\"tail\" onclick='pageBar.clickPage("+pageCount+")'><s></s></span>";
}else{
htmlStr += "<span class=\"next-btn disabled\"><s></s></span>";
htmlStr += "<span class=\"tail disabled\"><s></s></span>";
};
return htmlStr;
},
//跳转页面
goPage:function(obj){
if(event.keyCode == "13"){
var cruPage = $(obj).val();
pageBar.clickPage(cruPage);
}
},
clickPage:function(){
},
};
3.user.js代码
var User = function(){
this.init = function(){
$("#inquireBtn").unbind("click").bind("click", function() {
$("#pageNo").val(1);// 每次查询都默认为打开第一页
user.settingQuery();
});
};
//根据查询条件查询
this.settingQuery = function(){
$("#pageBar").html("");
var url = contextUrl + '/user/inquire/';
var inquireData = user.acquireInquireData();
$.ajax({
type: type,
async: true,
url: url,
data:inquireData
success: function (result) {
user.callback(result);
}
});
};
this.acquireInquireData = function(){
var page = {
pageSize:'20',
pageNo : $("#pageNo").val()// 页面显示第几页，为空时默认为加载第一页
};
var data = {
department:$('#department').val(),
page:page
};
return data;
};
//返回查询结果
this.callback = function(showData) {
var xHtml = '';
if (showData.length == 0) {
xHtml += "<tr><td class=\"nodata\" colspan=\"7\">No data to display!</td></tr>";
$("#resultTbody").html(xHtml);
} else {
for (var i = 0; i < showData.length; i++) {
detailId = i;
xHtml += "<tr>";
xHtml += "<td class='wid10'>" + (i + 1)+ "</td>";
xHtml += "<td>"+ showData[i].name + "</td>";
xHtml += "<td>"+ showData[i].mail + "</td>";
xHtml += "<td>"+ showData[i].department + "</td>";
xHtml += "</tr>";
}
$("#resultTbody").html(xHtml);
var pageBarStr = pageBar.pageInit(page.totalPage, page.pageNo,page.totalCount, user.clickPage, 5);
$(".search-footer").html(pageBarStr);
}
}
};
this.clickPage = function(page){
$("#pageNo").val(page);// 修改为当前页,然后翻页查询
user.settingQuery();
};
};
var user;
$(function(){
user = new User();
user.init();
//默认显示查询结果
user.settingQuery();
});