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固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
spring+angular实现导出excel的实现代码
Feb 27 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排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
超级退弹代码
2008/07/07 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
学习python的几条建议分享
2013/02/10 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python实现画出e指数函数的图像
2019/11/21 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
银行开业庆典方案
2014/02/06 职场文书
出生公证书样本
2014/04/04 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
创业计划书之网络外卖
2019/10/31 职场文书