我理解的分頁(yè)有三種方式：
第一種：前臺(tái)選擇相對(duì)應(yīng)的操作（如首頁(yè)柱衔、下一頁(yè)等）票唆，點(diǎn)擊的同時(shí)傳遞參數(shù)到后臺(tái)，后臺(tái)通過(guò)接受的參數(shù)調(diào)用相應(yīng)的方法實(shí)現(xiàn)分頁(yè)似踱。
第二種：前臺(tái)選擇相應(yīng)的操作，調(diào)用js部分編寫(xiě)的相對(duì)應(yīng)的方法稽煤，后臺(tái)只接收每一頁(yè)的起始值和結(jié)束值核芽，實(shí)現(xiàn)分頁(yè)。
第三種：假分頁(yè)酵熙，先將數(shù)據(jù)全部查詢(xún)出來(lái)轧简，通過(guò)前臺(tái)控制顯示，但是后臺(tái)不實(shí)現(xiàn)分頁(yè)（不推薦使用）匾二。我給大家分享的是第二種哮独，由于技術(shù)有限，所以寫(xiě)的可能不是很好察藐，但是功能實(shí)現(xiàn)了皮璧。
先從后臺(tái)開(kāi)始
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 {
/**
* 分頁(yè)顯示數(shù)據(jù)
* @param start
* @param end
* @return
*/
public List<Book> findBooks(@Param("start") Integer start,@Param("end") Integer end);
/**
* 計(jì)算總記錄數(shù)
* @return
*/
public Integer allCount();
}
service層
public interface IBookService {
public Map<String,Object> findBooks(Integer pageNumber, Integer pageSize);
public int allCount();
}
service的實(shí)現(xiàn)
public Map<String,Object> findBooks(Integer pageNumber, Integer pageSize) {
List<Book> rows = iBookMapper.findBooks(pageNumber,pageSize);//將查詢(xún)到的數(shù)據(jù)保存到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();
}
接下來(lái)是前臺(tái)頁(yè)面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖書(shū)列表</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">編號(hào)</th>
<th>書(shū)名</th>
<th>作者</th>
<th>價(jià)格</th>
<th>封面</th>
</thead>
<tbody align="center">
</tbody>
<tfoot>
<tr>
<td colspan="5" align="center">
每頁(yè)
<select>
<option>5</option>
<option>10</option>
<option>15</option>
</select>條|
<span id="firstPage" style="color:red;font-weight:bold" onclick="firstPage()">首頁(yè)</span>|
<span id="prePage" style="color:red;font-weight:bold" onclick="prePage()">上一頁(yè)</span>|
<span id="nextPage" style="color:red;font-weight:bold" onclick="nextPage()">下一頁(yè)</span>|
<span id="lastPage" style="color:red;font-weight:bold" onclick="lastPage()">最后一頁(yè)</span>|
<span style="color:red;font-weight:bold">當(dāng)前第<input style="width: 20px;" id="nowPage" type="text" value="1"/>頁(yè)</span>|
共<input style="width: 20px;" id="count"/>頁(yè)|
<span style="color:red;font-weight:bold">跳轉(zhuǎn)至第<input style="width: 20px;" id="jumpPage" type="text"
value="1"/>頁(yè)</span>
<button onclick="jump()">確定</button>
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var allCount;//記錄總數(shù)
var page;//總頁(yè)數(shù)
var pageNumber = 1;//默認(rèn)起始記錄
var pageSize = parseInt($("select").val());//每頁(yè)記錄數(shù)
window.onload = function () {
show();
/*獲取總記錄數(shù)*/
$.post("allCount.action", function (data) {
allCount = data;
pageNum();//頁(yè)面被加載默認(rèn)的頁(yè)數(shù)
}, "json");
}
/**
* 總頁(yè)數(shù)
* */
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);
}
}
/**
* 每頁(yè)顯示的條數(shù)
* */
$("select").change(function () {
pageNum();
pageSize = parseInt($("select").val());
cha = pageSize - pageNumber;
if (pageNumber != 1) {
pageNumber = 1;
}
$("#nowPage").val("1");
$("#jumpPage").val("1");
show();
});
/**
* 首頁(yè)
* */
function firstPage() {
pageNumber = 1;
pageSize = parseInt($("select").val());
$("#jumpPage").val("1");
if ($("#nowPage").val() == 1) {
alert("已經(jīng)是首頁(yè)了")
}
$("#nowPage").val("1");
show();
}
/**
* 上一頁(yè)
* */
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("已經(jīng)是首頁(yè)了")
}
}
/**
* 下一頁(yè)
* */
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("已經(jīng)是最后一頁(yè)了")
}
}
/**
* 跳轉(zhuǎn)至第幾頁(yè)
* */
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("該頁(yè)不存在")
$("#jumpPage").val($("#nowPage").val());
}
}
/**
* 最后一頁(yè)
* */
function lastPage() {
pageNumber = parseInt($("#count").val() - 1) * parseInt($("select").val()) + 1;
pageSize = allCount;
$("#jumpPage").val($("#count").val());
if ($("#nowPage").val() == $("#count").val()) {
alert("已經(jīng)是最后一頁(yè)了")
}
$("#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>
完整的代碼已經(jīng)上傳至github,寫(xiě)的不好，歡迎指教转培。
