这篇文章给大家分享的是有关ajax实现无刷新分页的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
1、Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态;
2、那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面;
3、实现原理:通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据,并显示。
现在什么都讲究一个无刷新,就连分页也是如此,下面是小编日常整理的关于一段无刷新代码,希望能够帮到大家。
代码如下:
一.html代码部分:
<table class="table style-5">
<thead id="t_head">
<tr>
<th>序号</th>
<th>标题</th>
<th>地点</th>
<th>已报名</th>
<th>类别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="t_body">
<!-- ajax填充列表 -->
</tbody>
</table>
<button id="firstPage">首页</button>
<button id="previous">上一页</button>
<button id="next">下一页</button>
<button id="last">尾页</button>
二.ajax代码部分:
var pageSize = "10";//每页行数
var currentPage = "1";//当前页
var totalPage = "0";//总页数
var rowCount = "0";//总条数
var params="";//参数
var url="activity_list.action";//action
$(document).ready(function(){//jquery代码随着document加载完毕而加载
//分页查询
function queryForPages()
{
$.ajax({
url:url,
type:'post',
dataType:'json',
data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params,
success:function callbackFun(data)
{
//解析json
var info = eval("("+data+")");
//清空数据
clearDate();
fillTable(info);
}
});
}
//填充数据
function fillTable(info)
{
if(info.length>1)
{
totalPage=info[info.length-1].totalPage;
var tbody_content="";//不初始化字符串"",会默认"undefined"
for(var i=0;i<info.length-1;i++)
{
tbody_content +="<tr>"
+"<td data-title='序号' >"+(i+1+(currentPage-1)*pageSize)+"</td>"
+"<td data-title='标题'>"+info[i].title.substr(0,20)+"</td>"
+"<td data-title='地点'>"+info[i].address.substr(0,6)+"</td>"
+"<td data-title='已报名'>"+info[i].quota_sign+"人</td>"
+"<td data-title='类别'>"+info[i].type+"</td>"
+"<td data-title='操作'><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>编辑</a></td>"
+"</tr>"
$("#t_body").html(tbody_content);
}
}
else
{
$("#t_head").html("");
$("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+info.msg+"</div>");
}
}
//清空数据
function clearDate()
{
$("#t_body").html("");
}
//搜索活动
$("#searchActivity").click(function(){
queryForPages();
});
//首页
$("#firstPage").click(function(){
currentPage="1";
queryForPages();
});
//上一页
$("#previous").click(function(){
if(currentPage>1)
{
currentPage-- ;
}
queryForPages();
});
//下一页
$("#next").click(function(){
if(currentPage<totalPage)
{
currentPage++ ;
}
queryForPages();
});
//尾页
$("#last").click(function(){
currentPage = totalPage;
queryForPages();
});
});
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
感谢各位的阅读!关于“ajax实现无刷新分页的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.jb51.net/article/77013.htm