前言
bootstrap tabel是基于 Bootstrap 的 jQuery 表格插件贫母，通過(guò)簡(jiǎn)單的設(shè)置，就可以擁有強(qiáng)大的單選盒刚、多選腺劣、排序、分頁(yè)因块，以及編輯橘原、導(dǎo)出、過(guò)濾（擴(kuò)展）等等的功能涡上。
主要功能
- 支持 Bootstrap 3 和 Bootstrap 2
- 自適應(yīng)界面
- 固定表頭
- 非常豐富的配置參數(shù)
- 直接通過(guò)標(biāo)簽使用
- 顯示/隱藏列
- 顯示/隱藏表頭
- 通過(guò) AJAX 獲取 JSON 格式的數(shù)據(jù)
- 支持排序
- 格式化表格
- 支持單選或者多選
- 強(qiáng)大的分頁(yè)功能
- 支持卡片視圖
- 支持多語(yǔ)言
- 支持插件
相關(guān)文檔
官方網(wǎng)站
示例（后臺(tái)分頁(yè)趾断，動(dòng)態(tài)獲取數(shù)據(jù)）
html部分
<!-- 用來(lái)實(shí)例化表格的容器 -->
<table id="example-table" class="table table-striped mb-none"></table>
js部分
$traineesTable.bootstrapTable('destroy');
$traineesTable.bootstrapTable({
url: '/users/***',
method: 'GET',
dataType: 'json',
striped: true,
pagination: true,
sidePagination: "server",
/**
* 這是一個(gè)大坑！
* 設(shè)置為undefined可以獲取pageNumber吩愧，pageSize芋酌，searchText，sortName雁佳，sortOrder
* 設(shè)置為limit可以獲取limit, offset, search, sort, order
* */
queryParamsType: "undefined",
queryParams: function (params) {
return {
currentPage: params.pageNumber, //頁(yè)碼
pageSize: params.pageSize, //頁(yè)面大小
realName: 'abc' // 自定義參數(shù)
};
},
//這里我查看源碼的隔嫡，在ajax請(qǐng)求成功后，發(fā)放數(shù)據(jù)之前可以對(duì)返回的數(shù)據(jù)進(jìn)行處理甘穿，返回什么部分的數(shù)據(jù)腮恩，比如我的就需要進(jìn)行整改的！
responseHandler: function (res) {
return {
total: res.data.total,
rows: res.data.traineeList
};
},
columns: [{
field: 'id',
title: '序號(hào)',
visible: false
}, {
field: 'loginName',
title: '賬號(hào)'
}, {
field: 'realName',
title: '姓名'
}, {
title: '操作',
field: 'realName',
align: 'center',
formatter: function (value, row, index) {
// value： 默認(rèn)的值
// row: 行對(duì)象
// index: 行序號(hào)温兼，從0開(kāi)始
return '這里是返回字符串';
}
}],
onLoadSuccess: function () {
// 當(dāng)表格實(shí)例化成功后調(diào)用的函數(shù)
}
})
