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 相关文章推荐
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
JavaScript的继承实现小结
May 07 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
Python深入学习之内存管理
2014/08/31 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
python与idea的集成的实现
2020/11/20 Python
最新销售员个人自荐信
2013/09/21 职场文书
初婚未育证明
2014/01/15 职场文书
致全体运动员广播稿
2014/02/01 职场文书
公司委托书范本
2014/04/04 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
农业项目合作意向书
2015/05/08 职场文书
辞职离别感言
2015/08/04 职场文书
中学总务处工作总结
2015/08/12 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技