Jquery+Json实现无刷新分页插件
dengjianbin
12年前
数据分页是一种可减轻服务器负担,很多地方只需要局部刷新即可,提高客户体验,此插件功能强大,使用简单,可灵活设置,使用时引入插件文件,再写上20多代码就可以轻松实现数据无刷新分页了,多的不讲了,先看效果
主要代码如下:
$(function(){ var jsonData = eval(json); $.each(jsonData,function(i,n){ $("#Searchresult").append("<li><img src=\""+n.pic+"\" atl=\""+n.name+"\" height=\"90\" /><br />"+n.name+"</li>"); }); var num_entries = $("#Searchresult li").length; var showCount = 12; $("#total").html("一共有 "+num_entries+" 条数据 每页显示"+showCount+"条"); var initPagination = function() { // 创建分页 $("#Pagination").pagination(num_entries, { num_edge_entries: 1, //边缘页数 num_display_entries: 6, //主体页数 callback: pageselectCallback, items_per_page:showCount //每页显示1项 }); }(); function pageselectCallback(page_index, jq){ var max_elem = Math.min((page_index+1) *showCount, num_entries); $("#htcList").html(""); for(var i=page_index*showCount;i<max_elem;i++){ var new_content = $("#Searchresult li:eq("+i+")").clone(); $("#htcList").append(new_content); //装载对应分页的内容 } return false; } });