Jquery:ajax实现翻页无刷新功能代码


Posted in Javascript onAugust 05, 2013

不多说,直接贴代码:
下面是js部分:

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(); 
}); 
});

下面是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>
Javascript 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 #Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 #Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 #Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 #Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 #Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 #Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 #Javascript
You might like
967 个函式
2006/10/09 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
使用javascript插入样式
2016/03/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python如何统计序列中元素
2020/07/31 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
服务标语大全
2014/06/18 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
布达拉宫导游词
2015/02/02 职场文书
研究生简历自我评
2015/03/11 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
会计专业自荐信范文
2019/05/22 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL