浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍

此插件是jquery的ajax分页插件。分页切换时无刷新也无延迟,因为是一次性加载的。如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好!

插件使用

此插件使用比较简单。主要引入以下文件就可以用了
1.jquery.js依赖库
2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可

<div class='pagination'></div>

3.jquery.pagination.js 分页的主要骨架

参数说明
可以右击下面的参数图片表,选择在新标签页中打开,即可看到大图

这里写图片描述

使用方法

	$("#Pagination").pagination(pageCount, {
	    num_edge_entries: 2,
	    num_display_entries: 4
	    callback: pageselectCallback,
	    items_per_page:10,
	    prev_text: "<上一页",
        next_text: "下一页>"
	});

上面代码中的pageCount一般是从后台返回的总的数据条数,也就是你一共有多少条数据。num_dege_entries:2表示首尾两侧分页显示2个。num_display_entries:4表示的是连续分页显示的主体数目,item_per_page:每页显示的列表项为10个。callback:pageselectCallback为回调函数。prev_text和next_text为前一页下一页按钮上的显示文字,默认的话是Prev 和 Next。

主要代码与效果展示

1.效果图(可以右击下面的图片,选择在新标签页中打开,即可看到大图)
这里写图片描述

2.主要代码

	//首次查询:	
	offline_mark = keeper_offline("1");
   	if (offline_mark != false) {
       	offlinePageMark();//分页查询
   	}
   	//--分页
	function offlinePageMark(){
	    $("#offlinePage").pagination(offline_mark,        {
	        num_edge_entries: 1, //边缘页数	    
	        num_display_entries: 5,//主体页数
	        callback: offlinePageCallback,
	        items_per_page: 2, //每页显示2项
	        prev_text: "<上一页",
	        next_text: "下一页>"
	    });
	}

	function offlinePageCallback(page_index, jq) {
	    var page_index = parseInt(page_index + 1);
	    keeper_offline(page_index);
	    return false;
	}
	function keeper_offline(pageStr){
		var offline_mark = false;
		var params={};
		params.helperId=helperId;
		params.homeStatus = "offline";
		params.page = pageStr;		
		$.ajax({
		    	type: 'post',
				dataType: 'json',
 				async:true,
				url: house_keeperURL,
				data:{params:JSON.stringify(params)},
				success: function (result) {
					if (result.retCode=="0000"){
						offline_mark = result.pageCount;
						//列表内容展示代码集,太多了,就省略了,根据各自需求去展示自己的内容就可以了												
					}else{								
					}
				}
		 	})
			return offline_mark;
	}

总结:

jquery pagination 是一个很好用的分页插件,展示的效果也是能适应大多需求的,样式的话也可以自己去改她的css就可以了。上手极其容易。我刚始接触分页的时候,并没有用这个插件。而是自己去写的一些共通的方法,代码也不多。后来,有了她,我就直接用她了。不过,我现在也不用她去分页了,现在用的就是layui的分页插件。如果还有不懂的童鞋,可以给我留言你的问题。

这里有更好的分页方法 浅谈js分页的几种方法 分页方法千万中,我现在唯爱这第3种方法!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值