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 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
Js sort排序使用方法
Oct 17 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
微信小程序-API接口安全详解
Jul 16 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
jquery 使用简明教程
2014/03/05 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python实现像awk一样分割字符串
2020/09/15 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
个人查摆剖析材料
2014/02/04 职场文书
日化店促销方案
2014/03/26 职场文书
软件测试专业推荐信
2014/09/18 职场文书
钱学森电影观后感
2015/06/04 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL