jquery ajax数据分页显示,基于Jquery+Ajax+Json实现分页显示

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

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相关配置

UTF-8

/WEB-INF/jsp/manage/black.jsp

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('

');

}

var dataRoot = data.jsonRoot;

if (pageTotal == 1) { // 当只有一页时

for (var j = 0; j < totalCount; j++) {

$(".li-tag").eq(j).append("")

.append("" + parseInt(j + 1)

+ "").append("" + dataRoot[j].mobile

+ "").append("" + dataRoot[j].province

+ "").append("" + dataRoot[j].gateway

+ "").append("" + dataRoot[j].insertTime

+ "").append("" + dataRoot[j].remark

+ "")

}

} else {

for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) {

if( j == totalCount){

break; // 当遍历到最后一条记录时，跳出循环

}

$(".li-tag").eq(k).append("")

.append("" + parseInt(j + 1)

+ "").append("" + dataRoot[j].mobile

+ "").append("" + dataRoot[j].province

+ "").append("" + dataRoot[j].gateway

+ "").append("" + dataRoot[j].insertTime

+ "").append("" + dataRoot[j].remark

+ "")

}

}

$(".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);

Technorati 标签: json数据

}

});

$("#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&plus;Ajax&plus;Json&plus;高效分页

摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

基于Jquery&plus;Ajax&plus;Json&plus;存储过程 高效分页

在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

jQuery &plus;ajax &plus;json&plus;实现分页

正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

Javascript实例技巧精选&lpar;6&rpar;—滚动鼠标中键读取Json数据分页显示网页内容

>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下:

背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

Jquery&plus;ajax&plus;json&plus;servlet原理和Demo

Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

基于jquery的json转table插件jsontotable

分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览   源码下载 实现的代码. html代码:

照葫芦画瓢系列之Java --- eclipse下使用maven创建Struts 2项目

一.创建Maven项目 http://www.cnblogs.com/zhanqun/p/8425571.html 二.添加struts2核心依赖包以及其他依赖项 打开pom.xm配置界面 点击Add ...

Spring4笔记6--Spring与AOP

Spring与AOP: AOP的引入: 主业务经常需要调用系统级业务(交叉业务),如果在主业务代码中大量的调用系统级业务代码,会使系统级业务与主业务深度耦合在一起,大大影响了主业务逻辑的可读性,降低了 ...