首页 > Javascript > jQuery Pagination分页插件适用详解
2018
08-28

jQuery Pagination分页插件适用详解

插件简介

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

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

使用方法

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

参数

参数名描述参数值
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回调函数默认无执行效果

举例

例如下面的使用代码:

$("#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

3.png

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
admin
TTF的家园-www.ttfde.top 个人博客以便写写东西,欢迎喜欢互联网的朋友一起交流!

本文》有 0 条评论

留下一个回复