springmvc+mybatis+mysql的分页的查询和显示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011900448/article/details/52173784

第一次写这么长的博客,经验不足,疏忽难免,有问题可随时交流,共同进步(有问题请评论)

一,应用场景

后端: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,数据库层分页查询代码

<?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">
	<select id="getUser" parameterType="String"  resultType="User">
		select name,mail
		from userTable   	
		where department = #{department}
		limit  #{page.startRow},#{page.pageSize}
	</select><!-- 统计符合条件的记录总数 -->
	<select id="countUser" parameterType="String" resultType="int">
		select count(name)
		from userTable
		where department = #{department}
	</select>
</mapper>

5,数据库dao层

public interface UserDao {

  List<User> getUser(UserVo userVo);

  int countUser(UserVo userVo);

}

6,service层

public interface UserService{
	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 = userVo.getPage();
		List<UserVo> 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><!-- 显示查询结果 -->
		<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>
	</body>
</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();
});

 

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试