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

最新推荐文章于 2021-02-13 20:22:21 发布

励志不回头

最新推荐文章于 2021-02-13 20:22:21 发布

阅读量6.1k

点赞数 5

分类专栏： js 文章标签： json

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript将JSON数据解析并显示为HTML表格的方法，并实现了基本的分页功能。该方法首先定义了数据源和表头信息，接着通过JavaScript函数根据指定的页码和每页显示的数据数量动态生成表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js解析json添加到表格并分页</title>
	</head>
	<script type="text/javascript">
		var tableData = [{
			"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": "C1",
			"ctext": "客户总收入"
		}, {
			"cid" :   "C2",
			"ctext" : "当月出账费用
		}];
		/**
		  page:页码 	  pageSize:每页的记录条数  此方法除了传入page和pageSize之外，还应知道的有三个参数： 
		   一、表的全部数据，json串格式，可通过action查询数据库得到。
	           二、表头所对应的列的key及名称，也是json串格式  
		   三、表所对应的id 
		   注：此处只是适合表头只有一行，且事先写好的情况。您可以根据需要改一下，逻辑思路就是这样，欢迎批评指正
		 */
		function splitPage(page, pageSize) {
			alert(1)
			var table = document.getElementById("#page_table");
			var num = table.rows.length; //table.rows返回表格中包含的所有行，此处假设表由表头1行和表体N行组成
			alert(num);
			//清除tbody
			for (var i = num - 1; i > 0; i--) {
				table.deleteRow(i);
			}
			var totalNums = tableData.length; //总行数
			var totalPage = Math.ceil(totalNums / pageSize); //总页数
			var begin = (page - 1) * pageSize; //页起始位置(包括)
			var end = page * pageSize; //页结束位置(不包括)
			end  =  end  > totalNums  ?  totalNums  :  end; 
			//向tbody中写入数据
			var n = 1; //tbody的起始行
			for (var i = begin; i < end; i++) {
				var row = table.insertRow(n++);
				var rowData = tableData[i];
				for (j = 0; j < columns.length; j++) {
					var col = columns[j].cid;
					var cell = row.insertCell(j);
					var cellData = 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>

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