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控制web打印(局部打印)方法整理
May 29 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
jquery实现轮播图特效
Apr 12 jQuery
JS常见内存泄漏及解决方案解析
May 30 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
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python脚本实时处理log文件的方法
2016/11/21 Python
python简易远程控制单线程版
2018/06/20 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python 下载文件的多种方法汇总
2020/11/17 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
社区服务活动总结
2014/05/07 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
经营场所使用证明
2015/06/19 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
使用springMVC所需要的pom配置
2021/09/15 Java/Android
详解python的异常捕获
2022/03/03 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python