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"+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实现的无刷新分页,希望对大家有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】