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 相关文章推荐
使用正则替换变量
May 05 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
vuex 的简单使用
2018/03/22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
Python日期操作学习笔记
2008/10/07 Python
python getopt 参数处理小示例
2009/06/09 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Django日志模块logging的配置详解
2017/02/14 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
数控专业应届生求职信
2013/11/27 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2015年读书月活动总结
2015/03/26 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python