SSM实现简单的分页
2018-05-31 本文已影响1人
_借东西的小人
我理解的分页有三种方式：
第一种：前台选择相对应的操作（如首页、下一页等），点击的同时传递参数到后台，后台通过接受的参数调用相应的方法实现分页。
第二种：前台选择相应的操作，调用js部分编写的相对应的方法，后台只接收每一页的起始值和结束值，实现分页。
第三种：假分页，先将数据全部查询出来，通过前台控制显示，但是后台不实现分页（不推荐使用）。我给大家分享的是第二种，由于技术有限，所以写的可能不是很好，但是功能实现了。
先从后台开始
mapper.xml
mapper namespace="com.zr.mapper.IBookMapper">
<resultMap id="bookMap" type="book">
<id property="id" column="book_id"/>
<result property="name" column="book_name"/>
<result property="author" column="book_author"/>
<result property="price" column="book_price"/>
<result property="cover" column="book_cover"/>
</resultMap>
<select id="findBooks" resultMap="bookMap">
<![CDATA[ select a1.* from
(select book_tab.*,rownum rn from book_tab) a1
where rn between #{start} and #{end}
]]>
</select>
<select id="allCount" resultType="java.lang.Integer">
select count(*) from book_tab
</select>
</mapper>
Mapper层
public interface IBookMapper {
/**
* 分页显示数据
* @param start
* @param end
* @return
*/
public List<Book> findBooks(@Param("start") Integer start,@Param("end") Integer end);
/**
* 计算总记录数
* @return
*/
public Integer allCount();
}
service层
public interface IBookService {
public Map<String,Object> findBooks(Integer pageNumber, Integer pageSize);
public int allCount();
}
service的实现
public Map<String,Object> findBooks(Integer pageNumber, Integer pageSize) {
List<Book> rows = iBookMapper.findBooks(pageNumber,pageSize);//将查询到的数据保存到list集合中
Integer total = iBookMapper.allCount();
Map<String,Object> map = new HashMap<String, Object>();
map.put("rows",rows);
map.put("total",total);
return map;
}
public int allCount() {
return iBookMapper.allCount();
}
action层
@RequestMapping(value = "/findBooks.action")
public @ResponseBody
Map<String,Object> findBooks(Integer pageNumber, Integer pageSize){
Map<String,Object> map = iBookService.findBooks(pageNumber,pageSize);
/*for (Object o : map.values()) {
System.out.println("value= " + o);
}*/
return iBookService.findBooks(pageNumber,pageSize);
}
@RequestMapping(value = "/allCount.action")
public @ResponseBody int allCount(){
return iBookService.allCount();
}
接下来是前台页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书列表</title>
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<table id="tab" border="1" cellspacing="0" cellpadding="0" width="650px" align="center">
<thead style="background-color: cornsilk;">
<th height="35px">编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>封面</th>
</thead>
<tbody align="center">
</tbody>
<tfoot>
<tr>
<td colspan="5" align="center">
每页
<select>
<option>5</option>
<option>10</option>
<option>15</option>
</select>条|
<span id="firstPage" style="color:red;font-weight:bold" onclick="firstPage()">首页</span>|
<span id="prePage" style="color:red;font-weight:bold" onclick="prePage()">上一页</span>|
<span id="nextPage" style="color:red;font-weight:bold" onclick="nextPage()">下一页</span>|
<span id="lastPage" style="color:red;font-weight:bold" onclick="lastPage()">最后一页</span>|
<span style="color:red;font-weight:bold">当前第<input style="width: 20px;" id="nowPage" type="text" value="1"/>页</span>|
共<input style="width: 20px;" id="count"/>页|
<span style="color:red;font-weight:bold">跳转至第<input style="width: 20px;" id="jumpPage" type="text"
value="1"/>页</span>
<button onclick="jump()">确定</button>
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var allCount;//记录总数
var page;//总页数
var pageNumber = 1;//默认起始记录
var pageSize = parseInt($("select").val());//每页记录数
window.onload = function () {
show();
/*获取总记录数*/
$.post("allCount.action", function (data) {
allCount = data;
pageNum();//页面被加载默认的页数
}, "json");
}
/**
* 总页数
* */
function pageNum() {
if (allCount % parseInt($("select").val()) == 0) {
page = parseInt(allCount / parseInt($("select").val()));
$("#count").val(page);
} else {
page = parseInt(allCount / parseInt($("select").val())) + 1;
$("#count").val(page);
}
}
/**
* 每页显示的条数
* */
$("select").change(function () {
pageNum();
pageSize = parseInt($("select").val());
cha = pageSize - pageNumber;
if (pageNumber != 1) {
pageNumber = 1;
}
$("#nowPage").val("1");
$("#jumpPage").val("1");
show();
});
/**
* 首页
* */
function firstPage() {
pageNumber = 1;
pageSize = parseInt($("select").val());
$("#jumpPage").val("1");
if ($("#nowPage").val() == 1) {
alert("已经是首页了")
}
$("#nowPage").val("1");
show();
}
/**
* 上一页
* */
function prePage() {
if (pageSize > parseInt($("select").val())) {
$("#nowPage").val(pageSize / parseInt($("select").val()) - 1);
$("#jumpPage").val(pageSize / parseInt($("select").val()) - 1);
pageSize = pageNumber - 1;
pageNumber = pageNumber - parseInt($("select").val());
show();
} else {
alert("已经是首页了")
}
}
/**
* 下一页
* */
function nextPage() {
if (allCount > pageSize) {
$("#nowPage").val(pageSize / parseInt($("select").val()) + 1);
$("#jumpPage").val(pageSize / parseInt($("select").val()) + 1);
pageNumber = pageNumber + parseInt($("select").val());
pageSize = pageNumber + parseInt($("select").val()) - 1;
show();
} else {
alert("已经是最后一页了")
}
}
/**
* 跳转至第几页
* */
function jump() {
var page = parseInt($("#jumpPage").val());
if (page <= parseInt($("#count").val())) {
pageSize = page * parseInt($("select").val());
pageNumber = (page - 1) * parseInt($("select").val()) + 1;
alert(pageNumber);
$("#nowPage").val($("#jumpPage").val());
show();
} else {
alert("该页不存在")
$("#jumpPage").val($("#nowPage").val());
}
}
/**
* 最后一页
* */
function lastPage() {
pageNumber = parseInt($("#count").val() - 1) * parseInt($("select").val()) + 1;
pageSize = allCount;
$("#jumpPage").val($("#count").val());
if ($("#nowPage").val() == $("#count").val()) {
alert("已经是最后一页了")
}
$("#nowPage").val($("#count").val());
show();
}
function show() {
$.post("findBooks.action", {pageNumber: pageNumber, pageSize: pageSize}, function (map) {
var list = map.rows;
var page = map.page;
$("#tab tbody").empty();
$.each(list, function (index, book) {
var tr = $("<tr>");
tr.append($("<td>" + book.id + "</td>"))
.append($("<td>" + book.name + "</td>"))
.append($("<td>" + book.price + "</td>"))
.append($("<td>" + book.author + "</td>"))
.append($("<td width='90px'><img src='images/" + book.cover + "' width=\"85px\" height=\"100px\"/></td>"))
;
$("#tab tbody").append(tr);
});
}, "json");
}
</script>
</body>
</html>
完整的代码已经上传至github,写的不好，欢迎指教。
