Biegral Blog

将jQuery Pagination分页插件用于不使用AJAX加载数据的页面，项目使用SpringMVC，使用Freemarker绑定数据，但分页显示样式不想自己处理，所以使用jQuery Pagination分页插件。

我们先来看看使用AJAX加载数据的方法：

<script type="text/javascript">
$(function(){
	//此demo通过Ajax加载分页元素
	var initPagination = function() {
		var num_entries = $("#hiddenresult div.result").length; //获取总记录数
		// 创建分页
		$("#Pagination").pagination(num_entries, {
			num_edge_entries: 1, //边缘页数
			num_display_entries: 4, //主体页数
			callback: pageselectCallback,
			items_per_page: 1, //每页显示1项
			prev_text: "前一页", 
			next_text: "后一页" 
		});
	 };
	 //处理分页按钮事件
	function pageselectCallback(page_index, jq){
		var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
		$("#Searchresult").empty().append(new_content); //装载对应分页的内容
		return false;
	}
	//ajax加载数据
	$("#hiddenresult").load("后台数据接口URL，通常返回JSON格式数据", null, initPagination);
});
</script>

不使用AJAX加载数据的方法：

	$(document).ready(function() {
		var initPagination = function() {
			var num_entries = ${totalCount};
			// 创建分页
			$("#pagination").pagination(num_entries, {
				num_edge_entries: 1, //边缘页数
				num_display_entries: 3, //主体页数
				link_to: "${ctx}/webpub/article/techedu/index.do",
				items_per_page:10, //每页显示10条记录
				prev_text: "<",
				next_text: ">",
				current_page:${pageIndex},
				callback:pageselectCallback
			});
		 }();
		//回调函数在用户每次点击分页链接的时候执行
		//参数page_index{int整型}表示当前的索引页
		//参数jq 是HTML元素引用，等于$("#pagination")
		function pageselectCallback(page_index, jq){
			//禁止循环调用
			if (page_index == ${pageIndex}){
				return false;
			}
			var url = this.link_to + "?start=" + (this.items_per_page * page_index) + "&limit=" + this.items_per_page;
			window.location.href = url; //转向后台处理数据
			return false;
		}
	});

${totalCount} 后台返回的总记录数；

${pageIndex} 当前页分页索引，如果是第一页它应该是0，第二页它应该是1。

相关HTML

<div class="jq-pagination-ctn">
	<div class="jq-pagination" id="pagination"></div>
</div>

注意事项

一、如何指定了“callback”回调函数，页面加载后它就会被调用；这里面有个逻辑问题，即：需要先通过AJAX加载数据，然后初始化分页插件，但“callback”回调函数随初始化被调用！这个方法本身应该是响应用户行为的，确在初始化是被调用，如果不添加条件判断，就可能产生死循环。

二、注意CSS样式类名，默认为“pagination”，如果你在使用Bootstrap，那可能产生冲突，所以我这里修改为“jq-pagination”。

参数

参数名	描述	参数值
maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"..."
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	默认无执行效果

参考：

jQuery Pagination分页插件