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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
模拟select的代码
Oct 19 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js三种排序算法分享
2012/08/16 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Python生成随机数的方法
2014/01/14 Python
python处理json数据中的中文
2014/03/06 Python
python pandas库的安装和创建
2019/01/10 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
高中体育教学反思
2014/01/29 职场文书
社会实践活动总结
2015/02/05 职场文书
生活委员竞选稿
2015/11/21 职场文书