最开始使用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
