jquery.pagination.js插件可以很方便的實現分頁效果，並且不需要你編寫頁碼，該插件會自動根據總條數去生成頁碼，並且每個頁碼都會有相應的功能。這裏插件中的內容我就不重複講解了，已經有許多大俠講解。注意：如果你的項目資源是使用maven倒過來的，那你一定要看一下插件內容中的 opts.callback(current_page, this);是否被註釋掉了，如果註釋掉的話需要你解註釋，否則回調函數會出問題。
該插件實現分頁需要兩個主要的方法，第一個爲計算數據庫中的總條數，第二個爲分頁方法。所以整合也就是根據這兩個方法來進行相應的調用。步驟如下：
整合步驟：
1、在controller中實現查詢數據庫中總條數的方法，該方法爲ajax調用
@ResponseBody
@RequestMapping("/pageCount")
public Integer pageCount(){
try {
int pageCount = infoBuyService.calculatePageCount();
return pageCount;
} catch (Exception e) {
log.debug("ERROR:/infoBuy/pageCount",e);
}
return null;
}
2、頁面上進行ajax調用該方法
//計算總頁數
function calculate(){
var pageCount = 0;//總頁數，需要在Calculate方法中爲其賦值
$.ajax({
type:"GET",
dataType:"text",
async:false,//爲js的全局變量賦值，如果設置爲true則會賦值不成功
url:path+"/infoBuy/pageCount",
success:function(data){
pageCount = data;
}
});
return pageCount;
}
此處的path的爲javascript的全局變量： var path = "${pageContext.request.contextPath}";//絕對路徑
URL中/infoBuy爲controller上面的@Controller
@RequestMapping("/infoBuy")
public class InfoBuyController {........}
3、編寫分頁代碼，此方法也爲ajax調用，返回一個頁面，然後再把頁面添加到相應的區域中
@RequestMapping(value="/listPage",method = RequestMethod.GET)
public String listPage(Model model,Integer pageIndex,Integer pageSize){
try {
List<InfoBuyDto> allInfoBuyDto = infoBuyService.infoBuyPage(pageIndex, pageSize);
model.addAttribute("list",allInfoBuyDto);
return "/infoBuy/infoBuy";//根據視圖解析器解析到infoBuy.jsp,在infoBuy.jsp頁面進行數據的展示
} catch (Exception e) {
log.debug("ERROR:/infoBuy/listPage",e);
}
return null;
}
pageIndex：爲當前的頁碼，pageSize：爲每頁顯示多少條
4、頁面上調用分頁方法
//請求數據
function InitTable(pageIndex) {
$.ajax({
type: "GET",
dataType: "text",
url: path+"/infoBuy/listPage", //提交到一般處理程序請求數據
data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, //提交兩個參數：pageIndex(頁面索引)，pageSize(顯示條數)
success: function (data) {
$("#list").empty();
$("#list").html(data);
}
});//ajax結尾
}//請求數據結尾
list爲該頁面上的div的id，用於把controller返回頁面加載到該div中。
5、在頁面初始化頁碼的數據
//頁碼初始數據
function initPagination(){
//分頁相關配置
$("#pagination").pagination(calculate(), {
callback: PageCallback,
prev_text: '上一頁', //上一頁按鈕裏text
next_text: '下一頁', //下一頁按鈕裏text
items_per_page: pageSize, //顯示條數
num_display_entries: 6, //連續分頁主體部分分頁條目數
current_page: pageIndex, //當前頁索引
num_edge_entries: 2 //兩側首尾分頁條目數
});
};
//翻頁調用
function PageCallback(index , jq) {
InitTable(index);
}
initPagination();//初始化頁碼
InitTable(0);
pagination爲頁碼顯示的div的id，如下代碼所示：
<!-- 求購信息顯示位置 -->
<div id="list"></div>
<!-- 分頁顯示位置 -->
<div id="pagination" style="text-align:center;" class="pagination" ></div>
在頁面上需要定義三個全局變量，path爲一個， var pageIndex = 0; //頁面索引初始值
var pageSize = 3; //每頁顯示條數初始化，修改顯示條數，修改這裏即可
在controller中調用service的方法，這裏就不在給大家編寫了。
infoBuy.jsp頁面代碼
這裏就不給大家截效果圖了，如有什麼需要的請私信我，看到後會給大家回覆的，謝謝