2017年11月19日,记录一下用hibernate+springMVC写了一个简单分页,但是功能还不够完善(没有获取数据的总数量,最大值写死了)!
这里记录一下思路:不管是动态生成数字按钮模式还是只有上下页按钮,中间加一个显示当前页按钮这种模式,都要从数据库获取一共有多少条数据,然后设置当前页显示数量,接着就是逻辑判断,当点击上一页或许下一页的时候,当前显示数量的第一条记录是从第几条记录开始,这里可以简单做一个数学计算!
网页代码:
列表显示:通过table放入
<table class="table table-hover">
<thead>
<th>姓名</th>
<th>性别</th>
<th>手机</th>
<th>Email</th>
<th>QQ号码</th>
<th>工作单位</th>
<th>地址</th>
<th>邮编</th>
<th>操作</th>
</thead>
<tbody id="Body">
</tbody>
</table>
分页按钮:
<!--分页按钮-->
<div id="btnFenye">
<button class="btn btn-default" onclick="againPage()">上一页</button>
当前页面:<input type="button" value="1" id="currentPage">
<!-- 这里不能直接使用button按钮,因为value的值只能设置,不能显示 -->
<!-- <button class="btn btn-default" id="currentPage" value="1"></button> -->
<button class="btn btn-default" onclick="nextPage()">下一页</button>
</div>
接下来是分页按钮事件,通过Ajax传值:
/* 按钮事件 ----------上一页 */
function againPage(){
//alert("上一页");
//这里需要转换哈类型,直接获取的是一个字符串类型,转为int类型
var currentPage = parseInt($("#currentPage").val());
//判断是否 小于1,
if(currentPage <= 1){
alert("已经是第一页了")
return false;
}
//alert("显示列表方法")
$.post("showInfo", //请求方式
{"currentPage": (currentPage - 1)},//请求参数,当前页
showList, //回调函数
"json"
)
//修改页面中显示 ,显示当前页
$("#currentPage").val(currentPage - 1);
}
/* 按钮事件 ---------下一页 */
function nextPage(){
//alert("下一页")
//这里需要转换哈类型,直接获取的是一个字符串类型,转为int类型
var currentPage = parseInt($("#currentPage").val());
//判断是否大于最大页面,页数需要动态生成
if(currentPage >= 4){
alert("已经是最一页了")
return false;
}
//alert("显示列表方法")
$.post("showInfo", //请求方式
{"currentPage": (currentPage + 1)},//请求参数,当前页
showList, //回调函数
"json"
)
//修改页面中显示 ,显示当前页
$("#currentPage").val(currentPage + 1);
}
接下来是显示列表,也是通过Ajax传值,这里我遇到一个问题,就是从数据库获取所有数据,是一个List,但是对于网页来说,前台的底层是没有集合这一说的,所以传过来就用的数组保存,所以使用使用数组的属性:
网页初始化:
$(function(){
// alert("初始化")
show()
})
调用显示列表的方法:
/* 显示初始列表 */
function show(){
//alert("显示列表方法")
$.post("showInfo", //请求方式
{"currentPage": 1},//请求参数,当前页,默认为1
showList, //回调函数
"json"
)
}
回调函数:
//成功回调函数
function showList(msg){
//alert("回调方法")
//alert(msg)
//console.log(msg)
var str="";
for(var i=0;i<msg.length;i++){
str+="<tr><td>"+msg[i]
.nickName+"</td><td>"+msg[i]
.gender+"</td><td>"+msg[i]
.phone+"</td><td>"+msg[i]
.email+"</td><td>"+msg[i]
.qqNumber+"</td><td>"+msg[i]
.workAddress+"</td><td>"+msg[i]
.homeAddress+"</td><td>"+msg[i] /* 把ID放到一个td里面,点击td获取ID */
.postcode+"</td><td class='"+msg[i].userID+"'><button class='updateBtn'>修改</button></td><td class='"+msg[i].userID+"'><button class='delBtn'>删除</button></td></tr>"
}
$("#Body").html(str) <!--为body设值-->
}
前台完成!
后台开始:
显示列表方法,DAO:
/**
* 查询用户所有信息(分页)
* @return User集合
*/
public List<User> findUser(int currentPage);
实现层:DaoImpl
@Override
public List<User> findUser(int currentPage) {
Session session=HibernateUtil.getSession();
Transaction transaction=session.beginTransaction();
String hql="from User";
Query query=session.createQuery(hql);
//设置每页显示条数
int max = 6;
query.setFirstResult((currentPage - 1) * max);//从哪一条记录开始显示出来
query.setMaxResults(max);//一次显示的数量
ArrayList<User> list=(ArrayList<User>) query.list();
transaction.commit();
session.close();
return list;
}
控制器:Contronller
//显示信息列表(更新:查询所有,并进行分页)
@RequestMapping("showInfo")
@ResponseBody //将java对象转换为json格式发送给客户端
//@RequestParam 从页面获取 值, required: 表示是否必须传入该值;defaultValue:表示该值的默认值
public List<User> showInfo(
@RequestParam(value="currentPage", required=false, defaultValue="0") int currentPage,
ModelMap model){
List<User> list=dao.findUser(currentPage);
System.out.println("控制值返回值:"+list.toString());
model.addAttribute("list",list);
return list;
}
列表显示分页功能实现!