springmvc+mybatis+mysql的分页的查询和显示
第一次写这么长的博客,经验不足,疏忽难免,有问题可随时交流,共同进步(有问题请评论)
一,应用场景
后端:springmvc+mybatis+mysql
前端:html+css+jquery+ajax
二,后端代码Demo
1,用户实体类
public class User{
private String name;
private String mail;
private String department;
//get和set方法
}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,数据库层分页查询代码
5,数据库dao层
public interface UserDao {
List getUser(UserVo userVo);
int countUser(UserVo userVo);
} 6,service层
public interface UserService{
List getUser(UserVo userVo);
} 7service实现层
@Service
public interface UserServiceImpl implenents UserService{
@Autowiredprivate UserDao userDao;
public List getUser(UserVo userVo){
if (userVo.getPage() == null) {
userVo.setPage(new Pagination());
}
Integer rows = userDao.countUser(userVo);
userVo.getPage().setTotalCount(rows);
Pagination page = userVo.getPage();
List 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 inquire (HttpServletRequest request, HttpServletResponse response,UserVo userVo){
List userList = userService.getUser( userVo);
return userList;
}
} 三,前端代码
1,html代码
分页查询demo
序号
姓名
邮箱
部门
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 +="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 += "No data to display! ";
xHtml += "" + (i + 1)+ " ";
xHtml += ""+ showData[i].name + " ";
xHtml += ""+ showData[i].mail + " ";
xHtml += ""+ showData[i].department + " ";
xHtml += " ";
}
$("#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();
});