最開始使用js拼接成table中的行，追加到table上，來實現數據的展示，需要寫好多之類的html標籤，不美觀，而且也不便於維護；後期改用bootstrap-table實現數據的展示和加載，一下子就從繁瑣的html拼接中解放出來了，github地址：https://github.com/wenzhixin/bootstrap-table
bootstrap-table支持導出、查找、隱藏列，還可以添加toolbar 結合js實現自己定製化的功能，簡直是前端表格展示的福音。
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/bootstrap-table.css">
<script type="text/javascript" src="/static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/js/json2.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table-export.js"></script>
<script type="text/javascript" src="/static/js/tableExport.js"></script>
</head>
<body>
<div class="mycontainer">
<table id="example" data-toggle="table" class="table table-bordered none-padding" data-show-columns="true" data-sort-name="viewId" data-sort-order="asc" data-show-export="true" data-toolbar="#selectModule">
<thead>
<tr>
<th data-field="viewId" data-sortable="true">需求ID</th>
<th data-field="summary">主題</th>
<th data-field="viewIssueType" data-sortable="true">需求類型</th>
<th data-field="viewState" data-sortable="true">狀態</th>
<th data-field="developer">開發人員</th>
<th data-field="tester">測試人員</th>
<th data-field="developUseTime" data-sortable="true">開發耗時(h)</th>
<th data-field="testUseTime" data-sortable="true">測試耗時(h)</th>
<th data-field="smokeState">冒煙情況</th>
<th data-field="submitTestTimes" data-sortable="true">提測輪次(次)</th>
<th data-field="totalBug" data-sortable="true">bug數(個)</th>
<th data-field="datee">上線日期</th>
<th data-field="remark">其他說明</th>
</tr>
</thead>
</table>
</div>
</body>
</html>javascript：
<script>
$(document).ready(function(e) {
reloadData();
});
function reloadData() {
// 重新展示table時，清空除標題外的其他數據
$("table").find("tr:gt(0)").remove();
data = [{
"remark": "",
"submitTestTimes": "1",
"datee": "2017-08-30",
"tester": "aaa",
"viewId": "",
"developUseTime": "0.8",
"summary": "測試數據1",
"testUseTime": "0.8",
"ownedGroup": "aaa",
"smokeState": "過",
"totalBug": 0,
"viewIssueType": "測試數據",
"viewState": "測試數據1",
"id": 1331,
"developer": "1"
}, {
"remark": "",
"submitTestTimes": "9",
"datee": "2017-08-31",
"tester": "測試人員2",
"viewId": "20868",
"developUseTime": "8.0",
"summary": "測試數據2",
"testUseTime": "4.0",
"ownedGroup": "aaa",
"smokeState": "aaa",
"totalBug": 0,
"viewIssueType": "aaa",
"viewState": "pass",
"id": 1332,
"developer": "測試數據2"
}];
$('#example').bootstrapTable('load', data);
//查出數據之後，延遲一下在變查詢按鈕，防止多次點擊
setTimeout(function() {
alert('延遲2s彈出');
}, 2000);
};
</script>效果如下：
參考文章：
Examples Bootstrap http://bootstrap-table.wenzhixin.net.cn/examples/
bootstrap-table github地址 https://github.com/wenzhixin/bootstrap-table