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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
JS实现瀑布流效果
Mar 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
mysql limit查询优化分析
2008/11/12 PHP
php debug 安装技巧
2011/04/30 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
js获取变量
2006/08/24 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python实现多进程代码示例
2018/10/31 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
书法培训心得体会
2014/01/05 职场文书
表彰大会主持词
2014/03/26 职场文书
导师工作推荐信范文
2014/05/17 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫