分页是经常用到的功能,这次用局部刷新分页 提高用户体验,
其实就是通过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);的方式输出就可以了。
分享到:
相关推荐
jQuery+Ajax+PHP无刷新分页
PHP+jQuery+Ajax无刷新分页加搜索
jquery+ajax+php无刷新分页
通过jquery实现PHP的无刷新分布,代码很完善,功能非常强大。学习分页的朋友可以下载看看,值得收藏!
无刷新分页jquery+ajax+php。适合初学者参考
汉化了一个国外的开源插件, myPagination+XML+PHP(JSP) 大家看看吧,喜欢的就下载,仅供交流,源代码用的是 LinApex 写的 myPaginationV4.0 他整理的比较乱,我重新完善了一下供大家下载。
只要把函数放进需要分页的地址配置好参数就可能自动分页。无刷新页面。
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
本文件包含 文件夹img、js、css、class和文件dele.php、 ... 通过php+mysql+jquery实现无刷新评论,包含分页!!还包含星级评分。 界面美观大方,大家稍稍修改就可运用在自己的网页系统中!!!!
用Jquery和PHP写的无刷新简单版分页
无刷新评论 无刷新分页等ajax应用~~无刷新评论 无刷新分页等ajax应用~~无刷新评论 无刷新分页等ajax应用~~
是一个典型的Ajax应用,在页面上,您只需要点击“下一页”,数据区将自动加载对应页码的数据,重新刷新数据区。类似的效果在很多网站上应用,尤其在一些需要展示大量图片数据的网页如淘宝商品列表页,Ajax分页效果让...
根据一下步骤,即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。
其核心代码jquery.pagination.js已随示例打包,Demo中包括了5种不同的分页效果演示,全部是Ajax无刷新方式实现分页,对于搞前端开发的朋友来说,这是个值得收藏的代码特效,为以后实现无刷新分页提供方便。...
主要介绍了jQuery结合,将Fckeditor发布的内容进行无刷新分页,需要的朋友可以参考下
php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
支持Ajax星星投票的PHP无刷新评论程序 分页通过PHP jQuery实现无刷新评论,包含分页!!还包含星级评分。稍微懂得PHP、MYSQL的朋友就可将本功能嵌入到自己的PHP网站中! 支持Ajax星星投票的PHP无刷新评论程序 分页...