分页是经常用到的功能,这次用局部刷新分页 提高用户体验,
其实就是通过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无刷新分页技术详解** 在现代Web开发中,用户界面的响应性和用户体验至关重要。无刷新分页是一种技术,它允许用户在浏览网页内容时,无需加载整个页面就能切换到不同的页面,提高了浏览效率。...
"PHP+jQuery+Ajax无刷新分页加搜索"是一个经典的技术组合,用于构建动态、高效的网页应用。这个技术方案结合了服务器端处理(PHP)、客户端交互(jQuery)以及异步数据交换(Ajax),实现了用户在不重新加载整个页面...
**jQuery + MySQL + PHP无刷新分页技术详解** 在网页开发中,为了提高用户体验,无刷新分页已经成为一种常见的需求。本教程将详细介绍如何利用jQuery、MySQL和PHP实现这一功能,帮助开发者创建更加流畅的数据浏览...
### ThinkPHP + AJAX无刷新分页技术解析 在现代Web开发中,用户体验是设计和实现网站时的关键考量因素之一。为了提升用户体验,无刷新页面更新技术变得越来越流行,其中AJAX(Asynchronous JavaScript and XML)...
以上就是使用jQuery、Ajax和PHP实现无刷新分页的基本步骤。通过这种方式,你可以创建一个高效、用户友好的分页系统,同时避免了页面频繁刷新带来的性能损失。在实际项目中,还可以根据需求进行更复杂的定制,如缓存...
"tp3.2+ajax无刷新分页" 指的是使用ThinkPHP 3.2框架结合Ajax技术实现的无刷新分页功能。ThinkPHP 3.2是一个广泛使用的PHP开发框架,它提供了丰富的MVC(Model-View-Controller)架构支持,便于开发者构建Web应用。...
**PHP + jQuery + Ajax 无刷分页技术详解** 在Web开发中,用户界面的响应性和用户体验至关重要。无刷分页是一种技术,它允许用户在浏览网页内容时无需刷新整个页面即可加载更多数据。这种技术结合了PHP后端处理、...
汉化了一个国外的开源插件, myPagination+XML+PHP(JSP) 大家看看吧,喜欢的就下载,仅供交流,源代码用的是 LinApex 写的 myPaginationV4.0 他整理的比较乱,我重新完善了一下供大家下载。
在网页开发中,实现无刷新分页是一种提升用户体验的重要技术。...总之,`JQuery`、`PHP`和`Ajax`结合使用,能够创建出一个高效、用户体验良好的无刷新分页系统,既减轻了服务器负担,也提供了流畅的浏览体验。
"PHP+Ajax+bootstrap+dataTables无刷新分页表格插件"的组合就是实现这一目标的有效方式。这个技术栈允许开发者构建出实时更新、无需刷新页面的动态表格,提供高效的数据浏览和管理功能。 首先,PHP是一种广泛使用的...
总结来说,无刷新分页通过jQuery监听用户交互,使用Ajax发送请求到PHP服务器,服务器根据请求处理数据并返回,前端再动态更新页面内容,从而提供流畅的用户体验。对于初学者,理解这个过程并动手实践,将有助于提升...
"php+jquery+ajax无刷新评论 无刷新翻页,字数统计 绝对可以用"这个标题和描述提到了三个关键技术:PHP、jQuery和AJAX,它们在实现动态、实时的网页功能上发挥着关键作用。下面我们将详细探讨这些技术以及如何结合...
本教程将介绍如何使用PHP、jQuery UI插件以及jQuery Pager插件来实现新闻的标签分类和无刷新分页功能,这能显著提升用户体验,使用户在浏览新闻时无需等待页面完全重载。 首先,PHP作为后端服务器语言,负责处理...
本文将详细介绍如何使用PHP和jQuery实现一个最简单的无刷新分页功能。 首先,我们需要理解什么是无刷新分页。无刷新分页,即用户在浏览网页时,切换页面不会重新加载整个页面,而是通过异步请求(通常使用Ajax)...
### PHP+AJAX无刷新分页技术解析及实践 #### 技术背景与意义 随着互联网技术的发展,用户对网站的交互性和响应速度有了更高的要求。传统的网页每次操作都需要重新加载整个页面,这种方式不仅增加了服务器的压力,...
"JqueryGrid 无刷新分页"指的是利用jQueryGrid实现的页面内容不更新的情况下进行数据分页的技术。这种方法可以提高用户体验,因为用户在浏览大量数据时无需等待整个页面重新加载,只需点击分页按钮即可获取新的数据...
在本实例中,我们探讨的是一个基于PHP、jQuery和AJAX技术实现的无刷新评论系统,同时具备无刷新翻页和字数统计功能。这样的设计能够显著提升用户体验,因为用户无需等待整个页面重新加载,就能查看新评论或进行翻页...