首页 web前端 js教程 基于Jquery Ajax Json实现分页显示附效果图_jquery

基于Jquery Ajax Json实现分页显示附效果图_jquery

May 16, 2016 pm 04:40 PM
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<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(); 
})
登录后复制

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PHP 数组转 JSON 的性能优化技巧 PHP 数组转 JSON 的性能优化技巧 May 04, 2024 pm 06:15 PM

PHP数组转JSON的性能优化方法包括:使用JSON扩展和json_encode()函数;添加JSON_UNESCAPED_UNICODE选项以避免字符转义;使用缓冲区提高循环编码性能;缓存JSON编码结果;考虑使用第三方JSON编码库。

Jackson库中注解如何控制JSON序列化和反序列化? Jackson库中注解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson库中的注解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略属性@JsonProperty:指定名称@JsonGetter:使用获取方法@JsonSetter:使用设置方法反序列化:@JsonIgnoreProperties:忽略属性@JsonProperty:指定名称@JsonCreator:使用构造函数@JsonDeserialize:自定义逻辑

如何使用Ajax从PHP方法中获取变量? 如何使用Ajax从PHP方法中获取变量? Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景,通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中,将介绍如何使用Ajax从PHP方法中获取变量,并提供具体的代码示例。首先,我们需要编写一个PHP文件来处理Ajax请求,并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码:

深入了解PHP:JSON Unicode转中文的实现方法 深入了解PHP:JSON Unicode转中文的实现方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP:JSONUnicode转中文的实现方法在开发中,我们经常会遇到需要处理JSON数据的情况,而JSON中的Unicode编码在一些场景下会给我们带来一些问题,特别是当需要将Unicode编码转换为中文字符时。在PHP中,有一些方法可以帮助我们实现这个转换过程,下面将介绍一种常用的方法,并提供具体的代码示例。首先,让我们先了解一下JSON中Un

PHP数组分页的最佳实现方式 PHP数组分页的最佳实现方式 May 04, 2024 pm 02:39 PM

PHP数组分页有两种最常见的方式:使用array_slice()函数:计算要跳过的元素数量,然后提取指定范围的元素。使用内置迭代器:实现Iterator接口,rewind()、key()、current()、next()和valid()方法用于遍历指定范围内的元素。

PHP 与 Ajax:创建动态加载内容的解决方案 PHP 与 Ajax:创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax(异步JavaScript和XML)允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax,您可以动态加载产品列表:HTML创建一个带有容器元素的页面,Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求,从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据,并将其编码为JSON格式。JavaScript解析JSON数据,并将其显示在页面容器中。点击按钮触发Ajax请求,加载产品列表。

PHP 数组转 JSON 的快捷技巧 PHP 数组转 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP数组可通过json_encode()函数转换为JSON字符串(例如:$json=json_encode($array);),反之亦可用json_decode()函数从JSON转换为数组($array=json_decode($json);)。其他技巧还包括:避免深度转换、指定自定义选项以及使用第三方库。

PHP 与 Ajax:构建一个自动完成建议引擎 PHP 与 Ajax:构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎:服务器端脚本:处理Ajax请求并返回建议(autocomplete.php)。客户端脚本:发送Ajax请求并显示建议(autocomplete.js)。实战案例:在HTML页面中包含脚本并指定search-input元素标识符。

See all articles