解決bootstrap table表格外掛所遇到的坑
阿新 • • 發佈：2018-11-11
效果圖：
第一點：bootstrap tab好用,並且是前端分頁（就是不需要去讀後臺數據庫來輔助分頁）
你下載了bootstrap，不是你就有了bootstrap table外掛，你還得要下載bootstrap table外掛；
bootstrap下載地址：http://www.bootcss.com/
bootstrap table外掛下載地址（下面3個有關）最好是從Github下載
官網地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/
Github地址： https://github.com/wenzhixin/bootstrap-table
中文文件：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
首先去github下載最新的版本，下載下來之後解壓如下:
2.2、在頁面中引入外掛
複製dist目錄下的檔案到專案中去:
還得引入Bootstrap的樣式與JS，和Jquery檔案，完整的引入如下:
<!-- 引入bootstrap樣式 -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- 引入bootstrap-table樣式 -->
<link href="css/bootstrap-table.css" rel="stylesheet">
<!-- jquery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="js/bootstrap-table.js"></script>
<!-- 引入中文語言包 -->
<script src="js/bootstrap-table-zh-CN.js"></script>
第二：使用方法：
1.寫一個空的table殼就可以
<table class="table table-striped table-bordered table-hover" id="tableL01"></table>2.在js中準備表頭資料和表中的資料後用
$('#tableL01').bootstrapTable({}),就可以啟動了， 注意此處的tableL01是你表格的id號，有時不出來資料，是因為在網上拷貝的程式碼後，沒有改id號的原因，對初學者算是一個坑；
3.表頭資料和表格內容的資料，都是以json的形式寫在$('#tableL01').bootstrapTable({ //你的資料寫在這裡 });
4.在啟動此表格之前，一定要先將以前的表格給清除掉，方法是：
$('#tableL01').bootstrapTable('destroy'); //動態載入表格之前，先銷燬表格
以上3、4兩點合併起來就是先執行4，再執行3，5.準備表頭資料：
var tableColumns = [
{field: 'name', title: '名稱', sortable: true},
{field: 'number', title: '編號', sortable: true},
];6.準備表格內容資料：
var mydata=[
{name:"aaaa",number:1111},
{name:"bbbb",number:2222},
];注意表格內容的name,number是與第5點中的field名字是相對應的，不然，你的表格顯示不出內容。這算一個坑。
7.完整的$('#tableL01').bootstrapTable({})就應該這樣寫：
$('#tableL01').bootstrapTable({//表格初始化
columns: tableColumns, //表頭
data:mydata, //表格中的資料,這是從本地取得資料，如果是從後臺取資料，就應該改為後臺地址
});8.要想達到前端分頁的目的，還要加入以下引數：
$('#tableL01').bootstrapTable({//表格初始化
columns: tableColumns, //表頭
data:mydata, //通過ajax返回的資料
width:300,
height:268,
method: 'get',
pageSize: 3, //每頁3條
pageNumber: 1, //第1頁
pageList: [10,25], //在使用過程中根據情況調整每頁條數.雖然你現在定義的每頁3條，但你可以隨時調整為10條或25條。
cache: false, //不快取
striped: true,
pagination: true,
sidePagination: 'client',
search: false,
showRefresh: false,
showExport: false,
showFooter: true,
// exportTypes: ['csv', 'txt', 'xml'],
clickToSelect: true,
});＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
完整的程式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-table-develop/src/bootstrap-table.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-table-develop/src/bootstrap-table.js"></script>
<script src="bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
$(function () {
var tableColumns = [
{field: 'name', title: '名稱', sortable: true},
{field: 'number', title: '編號', sortable: true},
{field: 'classes', title: '型別', sortable: true},
{field: 'standard', title: '規格', sortable: true},
{field: 'managestaff', title: '專管員', sortable: true},
{field: 'remark', title: '備註', sortable: true}
];
var data1=[
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
{name:"aaaa",number:1111,classes:"aklfdja",standard:"bbbb",managestaff:"ccccc",remark:"ddddd"},
];
$('#tableL01').bootstrapTable('destroy'); //動態載入表格之前，先銷燬表格
$('#tableL01').bootstrapTable({//表格初始化
columns: tableColumns, //表頭
data:data1, //通過ajax返回的資料
width:300,
height:268,
method: 'get',
pageSize: 3,
pageNumber: 1,
pageList: [],
cache: false,
striped: true,
pagination: true,
sidePagination: 'client',
search: false,
showRefresh: false,
showExport: false,
showFooter: true,
// exportTypes: ['csv', 'txt', 'xml'],
clickToSelect: true,
});
});
</script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body table-responsive">
<div class="query-div" id="toolbar">
<form class="form-inline" role="form" id="query_form">
<div class="form-group query-form-group">
<label for="status">狀態</label>
<select class="form-control" id="with_appr_status"
<option value="">全部</option>
<option value="S1">待處理</option>
<option value="S2">已處理</option>
</select>
</div>
<div class="form-group query-form-group">
<button type="button" class="btn btn-default" id="with_query">查詢</button>
</div>
</form>
</div>
<table class="table table-striped table-bordered table-hover" id="tableL01">
</table>
</div>
</div>
</body>
</html>