基于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的event详解。
Sep 06 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
js绘制一条直线并旋转45度
Aug 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
PHP安全配置
2006/10/09 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python如何爬取个性签名
2018/06/19 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
英语专业职业生涯规划范文
2014/03/05 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
安全生产专项整治方案
2014/05/06 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2014年环卫工作总结
2014/11/22 职场文书
项目负责人岗位职责
2015/02/15 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
python 中的jieba分词库
2021/11/23 Python