首先要下載bootstrap Table插件所必須的js，地址：https://github.com/wenzhixin/bootstrap-table
了解官方文檔地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
下載好后，需要導入如下文件：
<!--css--> <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/> <!--js--> <script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
html需要定義工具欄和表格
<div id="toolbar"></div><!--工具欄--> <table id="table"></table><!--表格-->
這次用本地數據，不調用后台數據了：
//模擬數據 var tableData = [ {id:1001,name:"小明",age:"15",sex:"男"}, {id:1002,name:"小紅",age:"13",sex:"女"}, {id:1003,name:"小剛",age:"16",sex:"男"}, {id:1004,name:"小鵬",age:"14",sex:"男"}, {id:1005,name:"小月",age:"16",sex:"女"} ]
然后就是顯示的事情啦：
$(document).ready(function () { $('#table').bootstrapTable({ data: tableData, // 數據 uniqueId: "id", locale: "zh-CN", // 語言 toolbar: "#toolbar", // 工具欄 search: true, // 顯示搜索 height: document.documentElement.clientHeight,//根據頁面高度定義表格高度 showColumns: true, //隱藏列 striped: true, // 是否顯示行間隔色 showRefresh: false, // 是否顯示刷新按鈕 clickToSelect: false, // 是否啟用點擊選中行 showToggle: false, // 是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, // 是否顯示詳細視圖javascript:void(0) sortable: false, // 是否啟用排序 sortOrder: "asc", // 排序方式 pagination: true, // 是否顯示分頁 sidePagination: "client", // 分頁方式：client客戶端分頁，server服務端分頁 columns: [ { field: 'name', title: '名稱', sortable: true, width: 280 }, { field: 'age', title: '年齡', sortable: true, width: 280 }, { field: 'sex', title: '性別', sortable: true, width: 280 }, ] }); });
頁面效果：
完整代碼：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>bootstrap-table</title> <!--css--> <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/> <!--js--> <script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //模擬數據 var tableData = [ {id:1001,name:"小明",age:"15",sex:"男"}, {id:1002,name:"小紅",age:"13",sex:"女"}, {id:1003,name:"小剛",age:"16",sex:"男"}, {id:1004,name:"小鵬",age:"14",sex:"男"}, {id:1005,name:"小月",age:"16",sex:"女"} ] $(document).ready(function () { $('#table').bootstrapTable({ data: tableData, uniqueId: "id", locale: "zh-CN", // 語言 toolbar: "#toolbar", // 工具欄 search: true, // 顯示搜索 height: document.documentElement.clientHeight,//根據頁面高度定義表格高度 showColumns: true, //隱藏列 striped: true, // 是否顯示行間隔色 showRefresh: false, // 是否顯示刷新按鈕 clickToSelect: false, // 是否啟用點擊選中行 showToggle: false, // 是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, // 是否顯示詳細視圖javascript:void(0) sortable: false, // 是否啟用排序 sortOrder: "asc", // 排序方式 pagination: true, // 是否顯示分頁 sidePagination: "client", // 分頁方式：client客戶端分頁，server服務端分頁 columns: [ { field: 'name', title: '名稱', sortable: true, width: 280 }, { field: 'age', title: '年齡', sortable: true, width: 280 }, { field: 'sex', title: '性別', sortable: true, width: 280 }, ] }); }); </script> </head> <body> <div id="toolbar"></div><!--工具欄--> <table id="table"></table><!--表格--> </body> </html>
有沒有覺得很簡單呢，下期更精彩