基于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 相关文章推荐
js 居中漂浮广告
Mar 21 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
JavaScript实例 ODO List分析
Jan 22 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
php连接mysql数据库代码
2009/03/10 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
angular动态表单制作
2018/02/23 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
JS实现的雪花飘落特效示例
2019/12/03 Javascript
Python 基础教程之闭包的使用方法
2017/09/29 Python
python使用Matplotlib画条形图
2020/03/25 Python
python3 爬取图片的实例代码
2018/11/06 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
一月红领巾广播稿
2014/02/11 职场文书
保护动物倡议书
2014/04/15 职场文书
员工试用期自我评价
2014/09/18 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
国庆阅兵观后感
2015/06/15 职场文书
优质护理心得体会
2016/01/22 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis