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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
JS查看对象功能代码
Apr 25 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
destoon实现调用热门关键字的方法
2014/07/15 PHP
php数组和链表的区别总结
2019/09/20 PHP
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
Python单例模式实例详解
2017/03/01 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python图像和办公文档处理总结
2019/05/28 Python
python基于Selenium的web自动化框架
2019/07/14 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
个人简历自荐信
2013/12/05 职场文书
小学家长会邀请函
2014/01/23 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
大学生活自我评价
2014/04/09 职场文书
担保书格式
2015/01/20 职场文书
信访维稳承诺书
2015/05/04 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
法人代表资格证明书
2015/06/18 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript