基于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中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
AngularJS手动表单验证
Feb 01 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python学习小技巧总结
2018/06/10 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python如何设置静态变量
2020/09/07 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
3分钟英语演讲稿
2014/04/29 职场文书
授权委托书格式
2014/07/31 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL