最近做到查詢數據列表，使用集合遍歷感覺有點low了，網上看了看就有這種table類的東西，用的bootStrap框架就找了個bootStrap Table，官網文檔下一波。
官網地址：http://bootstrap-table.wenzhixin.net.cn/
效果先看看怎麼樣：
當數據出來的時候我還以爲要自己加分頁查詢等等的東西，結果自帶功能，屌屌的，很強勢。
先引包吧 JS、CSS。
<script type="text/javascript" src="<%=path %>/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap-table.js"></script>
<link type="text/css" rel="stylesheet" href="<%=path %>/bootstrap/css/bootstrap-table.css">body
<body>
<table id="screenTable"
data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-halign="center">
<thead>
</thead>
</table>
</body>jQuery
<script type="text/javascript">
$('#screenTable').bootstrapTable({
method:'post',
url: "${pageContext.request.contextPath}/menudata",
dataType:'json',
cache: false, //不使用緩存
striped: true, //顯示行間隔色
pagination: true, //顯示分頁
pageSize: 5, //每頁的行數
pageList: [5, 10, 20], //自定義每頁的行數
search: true, //顯示錶格搜索
showRefresh: true, //刷新按鈕
columns: [{
field: "id",
title: "ID",
align: "center",
valign: "middle"
}, {
field: "pId",
title: "上級菜單ID",
align: "center",
valign: "middle"
}, {
field: "name",
title: "菜單名稱",
align: "center",
valign: "middle"
},{
field: "menu_action",
title: "菜單動作",
align: "center",
valign: "middle"
},{
field: "menu_icon",
title: "菜單圖標",
align: "center",
valign: "middle"
}],
formatNoMatches: function () {
return '無符合條件的記錄';
}
});這時候數據就能顯示了，但是顯示的都是英文，想改成中文的，網上說有中文包，就去文檔找，最後導入就搞掂了。
中文JS
<script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap-table-zh-CN.js"></script>