|
分页是经常用到的功能,这次用局部刷新分页 提高用户体验,
其实就是通过ajax提交 然后用js处理返回的数据并替换页面中的html代码。用到了jquery里面的post提交 返回数据类型为json。和each()函数html()函数等。
//分页显示
function PageIndex(actid,pgid)//参数为查找的id和页码
{
jQuery.ajax({
type:"POST",
url:"/praise/ajaxpage",
dataType: 'json',
data:"sid="+actid+"&pg="+pgid,
success:function(msg){
var arrPage = msg.page;
var arrData = msg.data;
var htmlfans = "";
var htmlpag = "";
var activeimgurl = jQuery("#activeimgurl").val();
var type,feetype;
jQuery(arrData).each(function(){
htmlfans = htmlfans + "<div class=\"imgDiv\">";
htmlfans = htmlfans + "<a href=\"http://cyworld.ifensi.com/ps3/index.php?mh_id="+this.user_id+"\" target=\"_blank\"><img src=\"http://i.ifensi.com/icon.php?uid="+this.user_id+"&size=small\" width=\"50\" height=\"50\"/></a>";
htmlfans = htmlfans + "<input onclick=\"unselectall()\" type=\"checkbox\" name=\"check1[]\" value="+this.user_id+" class=\"input\"/><a href=\"http:\/\/cyworld.ifensi.com\/ps3\/index.php?mh_id=\""+this.user_id+"\" target=\"_blank\">"+this.user_name+"</a>";
htmlfans = htmlfans + "</div>";
});
if (arrPage.mRecordCount>0)//拼接html语句的时候注意转义
{
htmlpag = htmlpag + "<a href=\"javascript:PageIndex("+msg.actid+",1)\">首页</a><a href=\"javascript:PageIndex("+msg.actid+","+arrPage.mPreviousPage+")\">上一页</a>";
htmlpag = htmlpag + "<div>";
for (var j = 1 ; j <=arrPage.mPageCount; j ++)
{
if(arrPage.mPage==j)
{
htmlpag = htmlpag + "<span class=\"thispage\">"+arrPage.mPage+"</span>";
}
else
{
htmlpag = htmlpag + "<a href=\"javascript:PageIndex("+msg.actid+","+j+")\">"+j+"</a>";
}
}
htmlpag = htmlpag + "</div>";
htmlpag = htmlpag + "<a href=\"javascript:PageIndex("+msg.actid+","+arrPage.mNextPage+")\">下一页</a><a href=\"javascript:PageIndex("+msg.actid+","+arrPage.mPageCount+")\">尾页</a>";
}
jQuery("#blb_fanslist").html(htmlfans);
jQuery("#blb_paginator").html(htmlpag);
}
}
);
}
php程序比较简单,只要把查询的结果以echo json_encode($arrFans);的方式输出就可以了。 |
|
|