将jQuery Pagination分页插件用于不使用AJAX加载数据的页面

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

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

不使用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

注意事项

一、如何指定了“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分页插件