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 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
Vue render深入开发讲解
Apr 13 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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提高编程效率的20个要点
2015/09/23 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
浅谈Angular 观察者模式理解
2018/11/01 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
如何理解python对象
2020/06/21 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
软件工程专业推荐信
2013/10/28 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
计算机软件专业求职信
2014/06/10 职场文书
班组拓展活动方案
2014/08/14 职场文书
门面房租房协议书
2014/08/20 职场文书
世界文化遗产导游词
2015/02/13 职场文书
家长会后的感想
2015/08/11 职场文书