基于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 For Beginners(转载)
Jan 05 Javascript
javascript 函数使用说明
Apr 07 Javascript
js如何取消事件冒泡
Sep 23 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python 使用get_argument获取url query参数
2017/04/28 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
财务经理岗位职责
2013/11/09 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
查摆剖析材料范文
2014/09/30 职场文书
法律意见书范文
2015/05/20 职场文书