jQuery Pagination分页插件适用详解

插件简介

• 此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。

• 原插件CSS不太合理，使用浮动，故无法方便实现左右方向的定位，且未清除浮动，在中文修改版中我对其进行了优化，使其支持text-align的定位。

使用方法

跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);

参数

举例

例如下面的使用代码：

$("#Pagination").pagination(56, {
    num_edge_entries: 2,
    num_display_entries: 4,
    callback: pageselectCallback,
    items_per_page:1
});

这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为1(items_per_page)个。

下面来看一个demo

1.引入jquery和jQuery Pagination

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>

2.初始化分页

<script type="text/javascript">
$(function(){
	var num_entries = $("#hiddenresult .show").length;//总条数
	var items_per_page = 1;//每页显示的条数
	var initPagination = function() {
		// 创建分页
		$("#Pagination").pagination(num_entries, {
			num_edge_entries: 1, //边缘页数
			num_display_entries: 4, //主体页数
			callback: pageselectCallback,
			items_per_page:items_per_page, //每页显示1项
			prev_text: "前一页",
			next_text: "后一页"
		});
		 
	 }();
	function pageselectCallback(page_index, jq){
		debugger
		// 从表单获取每页的显示的列表项数目
		var max_elem = Math.min((page_index+1) * items_per_page, num_entries);
		
		$("#Searchresult").html("");
		// 获取加载元素
		for(var i=page_index*items_per_page;i<max_elem;i++){
			$("#Searchresult").append($("#hiddenresult .show:eq("+i+")").clone());
		}
		//阻止单击事件
		return false;
	}
});
</script>

3.html部分

<div id="hiddenresult" style="display:none;">
    <dl class="show"><dt><strong>这是标题1</strong></dt><dd>这是标题1下的内容1</dd><dd>这是标题1下的内容2</dd></dl>
    <dl class="show"><dt><strong>这是标题2</strong></dt><dd>这是标题2下的内容1</dd><dd>这是标题2下的内容2</dd></dl>
    <dl class="show"><dt><strong>这是标题3</strong></dt><dd>这是标题3下的内容1</dd><dd>这是标题3下的内容2</dd></dl>
</div>

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈