Java json数组对象获取到前端的值使用js分页
使用ajax时,得到的返回值是一个json数组对象,现在需要对其进行分页显示,下面有两个js方法,一个是使用ajax,另一个就是分类。
在写这一块代码的时候的时候,有一个意外的小发现,
$(inputTest).val()
这样也能获取<input type = "test" id = "inputTst" />
这个也能获取该input的value值。
通过单击事件,使用ajax进行交互—–
$("#btnIndex").click(function() {
var url = "/PublicServicePlatform/AnnualSelectServlet?time=" + new Date().getTime();
var btnIndex = $("#txtIndex").val();
/*指标值*/
var selectTarget = $("#selectTarget").val();
/*年鉴名*/
var selectYears = $("#selectYears").val();
/*年份*/
if (selectTarget == "- -请选择年鉴- -") {
selectTarget = "";
}
if (selectYears == "- -请选择年鉴时间- -") {
selectYears = "";
var judgeMark = confirm('您没有选择具体时间,确定要继续吗?');
if (!judgeMark) {
return;
}
}
var sendData = {
flag: "btnIndex",
btnIndex: btnIndex,
selectTarget: selectTarget,
selectYears: selectYears
};
var xhr = $.post(url, sendData,
function() {
var jsonString = xhr.responseText;
var jsonObj = JSON.parse(jsonString);
var table_tr_num = jsonObj.length;
/******分页使用代码块*******/
var totalPage = 0; //总页数
var length = 5; //每页显示行数
//总共分几页
if (table_tr_num / length > parseInt(table_tr_num / length)) {
totalPage = parseInt(table_tr_num / length) + 1;
} else {
totalPage = parseInt(table_tr_num / length);
}
/******分页使用代码块*******/
console.log('共分了' + totalPage + '页');
getPage(jsonObj, table_tr_num, totalPage, 1, 5); //参数解释-- 返回的josn对象 、总的对象条数 、 总的页数 、当前页 、当前页开始的条数、 每页显示的条数
});
});
js分页函数—-
/*分页 计算*/
function getPage(jsonObj, table_tr_num, totalPage, current_count, count_length) {//参数解释-- 返回的josn对象、总的数据条数 、 总的页数 、当前页 、 每页显示的条数
console.log('totalPage = '+totalPage+'; current = '+count_length+'; count_length = '+count_length);
if(current_count <= 1){
i = 0;
length = (count_length > table_tr_num)? table_tr_num : count_length;
current = 1;
} else if(current_count <= totalPage) {
i = (current_count - 1) * count_length;
tem = current_count * count_length;
length = (tem > table_tr_num)? table_tr_num : tem;
current = current_count;
} else if(current_count > totalPage){
i = (totalPage - 1) * count_length;
length = table_tr_num;
current = totalPage;
}
$jsonObj = jsonObj;
$table_tr_num = table_tr_num;
$totalPage = totalPage;
$current = current;
var $info = '<tr><td><b>指标名</b></td><td>指标父类</td><td>指标所在表</td><td>指标所在年鉴</td><td>操作</td></tr>';
for ( ; i < length ; i++) {
var otherDims = jsonObj[i].otherDims;/*另一维中文名*/
var otherDims_id = jsonObj[i].otherDims_title_id;/*另一维id*/
var indexName = jsonObj[i].indexName;/*指标中文名*/
var annual_title_id = jsonObj[i].annual_title_id;/*指标id*/
var annual_title_region = jsonObj[i].annual_title_region;/*指标id*/
var parentNames = jsonObj[i].parentNames;/*父节点*/
var tableName = jsonObj[i].tableName;/*表名*/
var annualName = jsonObj[i].annualName;/*年鉴名*/
var annualYear = jsonObj[i].annualYear;/*年鉴时间*/
var annualRegion = jsonObj[i].annualRegion;/*年鉴地域*/
$info += '<tr><td>'+indexName+'</td><td>'
+ parentNames + '</td><td>' + tableName + '</td><td>' + annualName
+ '</td><td><input type="checkbox" name="titleInfo" onclick="addIndex(this)" value="'
+indexName+'***'+annual_title_id+'***'
+otherDims+'***'+otherDims_id+'***'+annualYear+'***'
+annualRegion+'***'+annual_title_region+'" /></td></tr>';
}
$("#titleInfo").html($info);
$indexInfo = '<input type="button" onclick="creatTables()" value="新建表">'
+'<input type="button" onclick="addPreTab()" value="添加到上一个表">'
+'<input type="button" onclick="gettable()" value="查看建表详情">'
+'<div id="barcon" name="barcon"></div>';
$('#indexButton').css('display','block');
$('#indexButton').html($indexInfo);
$page = '<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,1,5);">首页</a></li>'
+'<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$current-1,5);">上一页</a></li>'
+'<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$current+1,5);">下一页</a></li>'
+'<li class="p-prev disabled"><a onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$totalPage,5);">尾页</a></li>'
+'<li class="total">共 '+table_tr_num+'条 '+ totalPage+ '页 第 <font size="3" color="red">'+ current +'</font>'
+' 页 跳转到第<input type="text" id="JumpPar"/>页 </i><input value="确定" type="button" onclick="javascript:getPage($jsonObj,$table_tr_num,$totalPage,$(JumpPar).val(),5);" /></li>';
$('#page').html($page);
}
以上代码是在项目中的实际代码,或有累赘,只看对你有用的即可。