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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
angular6的响应式表单的实现
Oct 10 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中的命名空间相关概念浅析
2015/01/22 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
Python pandas常用函数详解
2018/02/07 Python
python list转矩阵的实例讲解
2018/08/04 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python assert语句的简单使用示例
2019/07/28 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python实现两个文件夹的同步
2019/08/29 Python
python tkinter控件布局项目实例
2019/11/04 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
铁路个人事迹材料
2014/01/30 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
政工例会汇报材料
2014/08/26 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
早上好问候语大全
2015/11/10 职场文书
工伤调解协议书
2016/03/21 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js