基于Jquery+Ajax+Json实现分页显示附效果图


Posted in Javascript onJuly 30, 2014

1.后台action产生json数据。

List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); 
int totalRows = blackList.size(); 
StringBuffer sb = new StringBuffer(); 
sb.append("{\"totalCount\":\""+totalRows+"\","); 
sb.append("\"jsonRoot\":["); 
for (int i=0;i<blackList.size();i++) { 
LBlack blackInfo = (LBlack)blackList.get(i); 
sb.append("{\"id\":\""+ blackInfo.getId()); 
sb.append("\","); 
sb.append("\"mobile\":\""+ blackInfo.getMobile()); 
sb.append("\","); 
sb.append("\"province\":\""+ blackInfo.getProvince()); 
sb.append("\","); 
sb.append("\"gateway\":\""+ blackInfo.getGateway()); 
sb.append("\","); 
sb.append("\"insertTime\":\""+ blackInfo.getInsertTime()); 
sb.append("\","); 
sb.append("\"remark\":\""+ blackInfo.getRemark()); 
sb.append("\""); 
sb.append("},"); 
} 
sb.deleteCharAt(sb.lastIndexOf(",")); // 删去最后一个逗号 
sb.append("]}"); 

HttpServletResponse response = ServletActionContext.getResponse(); 
response.setContentType("text/plain"); 
response.getWriter().print(sb);

2.struts.xml相关配置

<action name="blackList" class="blackAction" method="blackList"> 
<!--plaintext用于显示页面原始代码的结果类型--> 
<result type="plainText"> 
<param name="charSet">UTF-8</param> 
<param name="location">/WEB-INF/jsp/manage/black.jsp</param> 
</result> 
</action>

3.js获取json数据分页显示

function getJSONData(pn) { 
// alert(pn); 
$.getJSON("blackList.ce", function(data) { 
var totalCount = data.totalCount; // 总记录数 
var pageSize = 10; // 每页显示几条记录 
var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
var startPage = pageSize * (pn - 1); 
var endPage = startPage + pageSize - 1; 
var $ul = $("#json-list"); 
$ul.empty(); 
for (var i = 0; i < pageSize; i++) { 
$ul.append('<li class="li-tag"></li>'); 
} 
var dataRoot = data.jsonRoot; 
if (pageTotal == 1) { // 当只有一页时 
for (var j = 0; j < totalCount; j++) { 
$(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>") 
.append("<span class='col2'>" + parseInt(j + 1) 
+ "</span>").append("<span class='col3'>" + dataRoot[j].mobile 
+ "</span>").append("<span class='col4'>" + dataRoot[j].province 
+ "</span>").append("<span class='col5'>" + dataRoot[j].gateway 
+ "</span>").append("<span class='col6'>" + dataRoot[j].insertTime 
+ "</span>").append("<span class='col7'>" + dataRoot[j].remark 
+ "</span>") 
} 
} else { 
for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { 
if( j == totalCount){ 
break; // 当遍历到最后一条记录时,跳出循环 
} 
$(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>") 
.append("<span class='col2'>" + parseInt(j + 1) 
+ "</span>").append("<span class='col3'>" + dataRoot[j].mobile 
+ "</span>").append("<span class='col4'>" + dataRoot[j].province 
+ "</span>").append("<span class='col5'>" + dataRoot[j].gateway 
+ "</span>").append("<span class='col6'>" + dataRoot[j].insertTime 
+ "</span>").append("<span class='col7'>" + dataRoot[j].remark 
+ "</span>") 
} 
} 
$(".page-count").text(pageTotal); 
}) 
} 
function getPage() { 
$.getJSON("blackList.ce", function(data) { 
pn = 1; 
var totalCount = data.totalCount; // 总记录数 
var pageSize = 10; // 每页显示几条记录 
var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
$("#next").click(function() { 
if (pn == pageTotal) { 
alert("后面没有了"); 
pn = pageTotal; 
} else { 
pn++; 
gotoPage(pn); 
} 
}); 
$("#prev").click(function() { 
if (pn == 1) { 
alert("前面没有了"); 
pn = 1; 
} else { 
pn--; 
gotoPage(pn); 
} 
}) 
$("#firstPage").click(function() { 
pn = 1; 
gotoPage(pn); 
}); 
$("#lastPage").click(function() { 
pn = pageTotal; 
gotoPage(pn); 
}); 
$("#page-jump").click(function(){ 
if($(".page-num").val() <= pageTotal && $(".page-num").val() != ''){ 
pn = $(".page-num").val(); 
gotoPage(pn); 
}else{ 
alert("您输入的页码有误!"); 
$(".page-num").val('').focus(); 
} 
}) 
$("#firstPage").trigger("click"); 

}) 
} 
function gotoPage(pn) { 
// alert(pn); 
$(".current-page").text(pn); 
getJSONData(pn) 
} 

$(function() { 
getPage(); 
})

基于Jquery+Ajax+Json实现分页显示附效果图

Javascript 相关文章推荐
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jquery实现弹出层效果实例
May 19 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 #Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 #Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 #Javascript
浅析Node在构建超媒体API中的作用
Jul 30 #Javascript
JS实现图片无间断滚动代码汇总
Jul 30 #Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 #Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 #Javascript
You might like
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
JS简单计算器实例
2015/01/20 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python查看模块安装位置的方法
2018/10/16 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python对常见数据类型的遍历解析
2019/08/27 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
生育关怀行动实施方案
2014/03/26 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
小学教师岗位职责
2015/04/02 职场文书
党员反邪教心得体会
2016/01/15 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python