当前位置:文档之家› js解析json添加到表格并分页

js解析json添加到表格并分页

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><base href="<%=basePath%>"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><title>分页</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript">vartableData = [ {"C0" : "临夏州_康乐县","C1" : 190893.39,"C2" : 24544.65,"AREA_ID" : "930013005"}, {"C0" : "临夏州_永靖县","C1" : 368900.35,"C2" : 40592.19,"AREA_ID" : "930013006"}, {"C0" : "兰州市_东岗分局","C1" : 88.48,"C2" : 126.4,"AREA_ID" : "930013106"}, {"C0" : "临夏州_临夏县","C1" : 107337.9,"C2" : 20612.1,"AREA_ID" : "930013008"}, {"C0" : "临夏州_广河县","C1" : 69738.07,"C2" : 34894.44,"AREA_ID" : "930013003"}, {"C0" : "临夏州_和政县","C1" : 46622.96,"C2" : 20954.97,"AREA_ID" : "930013002"}, {"C0" : "临夏州_东乡县","C1" : 96021.84,"C2" : 16725.63,"AREA_ID" : "930013004"}, {"C0" : "临夏州_临夏市中心","C1" : 1845311.12,"C2" : 129478.93,"AREA_ID" : "930013001"}, {"C0" : "天水市_秦州区","C1" : 0,"C2" : 0,"AREA_ID" : "930013801"}, {"C0" : "临夏州_积石山","C1" : 256181.79,"C2" : 15185.98,"AREA_ID" : "930013007"}, {"C0" : "酒泉_肃州区","C1" : 264312,"C2" : 402.6,"AREA_ID" : "930013701"} ];var columns = [ {"cid" : "C0","ctext" : "区县"}, {"cid" : "C1","ctext" : "客户总收入"}, {"cid" : "C2","ctext" : "当月出账费用"} ];/**page:页码pageSize:每页的记录条数此方法除了传入page和pageSize之外,还应知道的有三个参数:一、表的全部数据,json串格式,可通过action查询数据库得到。

二、表头所对应的列的key及名称,也是json串格式三、表所对应的id注:此处只是适合表头只有一行,且事先写好的情况。

您可以根据需要改一下,逻辑思路就是这样,欢迎批评指正。

*/functionsplitPage(page, pageSize) {varptable = document.getElementById("page_table");varnum = ptable.rows.length;//table.rows返回表格中包含的所有行,此处假设表由表头1行和表体N行组成//alert(num);//清除tbodyfor ( vari = num - 1; i> 0; i--) {ptable.deleteRow(i);}vartotalNums = tableData.length;//总行数vartotalPage = Math.ceil(totalNums / pageSize);//总页数var begin = (page - 1) * pageSize;//页起始位置(包括)var end = page * pageSize;//页结束位置(不包括)end = end >totalNums ? totalNums : end;//向tbody中写入数据var n = 1;//tbody的起始行for ( vari = begin; i< end; i++) {var row = ptable.insertRow(n++);varrowData = tableData[i];for ( var j = 0; j <columns.length; j++) {var col = columns[j].cid;var cell = row.insertCell(j);varcellData = rowData[col];cell.innerHTML = cellData;}}//生成分页工具条varpageBar = "第" + page + "页/共" + totalPage + "页" + " ";if (page > 1) {pageBar += "<a href=\"javascript:splitPage(" + 1 + "," + pageSize+ ");\">首页</a> ";} else {pageBar += "首页";}if (page > 1) {pageBar += "<a href=\"javascript:splitPage(" + (page - 1) + ","+ pageSize + ");\">上一页</a> ";} else {pageBar += "上一页";}if (page <totalPage) {pageBar += "<a href=\"javascript:splitPage(" + (page + 1) + ","+ pageSize + ");\">下一页</a> ";} else {pageBar += "下一页";}if (page <totalPage) {pageBar += "<a href=\"javascript:splitPage(" + (totalPage) + ","+ pageSize + ");\">尾页</a> ";} else {pageBar += "尾页";}document.getElementById("page_bar").innerHTML = pageBar;}</script></head><body onload="splitPage(1,3);"><table id="page_table"><thead><tr><th>h1</th><th>h2</th><th>h3</th></tr></thead><tbody><tr><td>111</td><td>222</td><td>333</td></tr></tbody></table><div id="page_bar"></div></body></html>。

相关主题