尚硅谷尚筹网单一架构知识八导航条部分jQuery的分页插件：Pagination

Pagination插件

1.1 页面显示：导航条部分
使用一个基于jQuery的分页插件：Pagination
Pagination插件
1.1.1 环境搭建
 加入样式文件
将尚筹网/前端/pagination_zh/lib/pagination.css复制到/atcrowdfunding-admin-1-webui/src/main/webapp/css目录下

 在需要的页面引用pagination.css

 加入Pagination的js文件
将尚筹网/前端/pagination_zh/lib/jquery.pagination.js复制到/atcrowdfunding-admin-1-webui/src/main/webapp/script目录下

 在需要的页面引用jquery.pagination.js

1.1.2 分页导航条需要在HTML标签中加入的部分

4.9.3	jQuery代码
$(function() {
	
	// 对分页导航条显示进行初始化
	initPagination();
	
});

// 声明函数封装导航条初始化操作
function initPagination() {
	
	// 声明变量存储总记录数
	var totalRecord = ${requestScope['PAGE-INFO'].total};
	
	// 声明变量存储分页导航条显示时的属性设置
	var paginationProperties = {
		num_edge_entries : 3,			//边缘页数
		num_display_entries : 5,		//主体页数
		callback : pageselectCallback,	//回调函数
		items_per_page : ${requestScope['PAGE-INFO'].pageSize},	//每页显示数据数量，就是pageSize
		current_page : ${requestScope['PAGE-INFO'].pageNum - 1},//当前页页码
		prev_text : "上一页",			//上一页文本
		next_text : "下一页"			//下一页文本
	};
	
	// 显示分页导航条
	$("#Pagination").pagination(totalRecord, paginationProperties);
}

// 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
function pageselectCallback(pageIndex, jq) {
	
	// pageIndex从0开始，pageNum从1开始
	var pageNum = pageIndex + 1;
	
	// 跳转页面
	window.location.href = "admin/query/for/search.html?pageNum="+pageNum;
	
	return false;
}

4.9.4 Pagination修改源码
修改/atcrowdfunding-admin-1-webui/src/main/webapp/script/jquery.pagination.js文件，将158行注释掉
// opts.callback(current_page, this);
对应的问题：Pagination因为在这个地方重新加载页面，会造成死循环

@RequestMapping("/admin/query/for/search")
	public String queryForSearch(
			
			// 如果页面上没有提供对应的请求参数，那么可以使用defaultValue指定默认值
			@RequestParam(value="pageNum", defaultValue="1") Integer pageNum, 
			@RequestParam(value="pageSize", defaultValue="5") Integer pageSize, 
			@RequestParam(value="keyword", defaultValue="") String keyword,
			Model model) {
		
		PageInfo<Admin> pageInfo = adminService.queryForKeywordSearch(pageNum, pageSize, keyword);
		
		model.addAttribute(CrowdFundingConstant.ATTR_NAME_PAGE_INFO, pageInfo);
		
		return "admin-page";
	}

效果