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

前端技术 2023/09/02 JavaScript

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(); 
})

本文地址:https://www.stayed.cn/item/5395

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。