前言
bootstrap tabel是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
主要功能
- 支持 Bootstrap 3 和 Bootstrap 2
- 自适应界面
- 固定表头
- 非常丰富的配置参数
- 直接通过标签使用
- 显示/隐藏列
- 显示/隐藏表头
- 通过 AJAX 获取 JSON 格式的数据
- 支持排序
- 格式化表格
- 支持单选或者多选
- 强大的分页功能
- 支持卡片视图
- 支持多语言
- 支持插件
相关文档
官方网站
示例（后台分页，动态获取数据）
html部分
<!-- 用来实例化表格的容器 -->
<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",
/**
* 这是一个大坑！
* 设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
* 设置为limit可以获取limit, offset, search, sort, order
* */
queryParamsType: "undefined",
queryParams: function (params) {
return {
currentPage: params.pageNumber, //页码
pageSize: params.pageSize, //页面大小
realName: 'abc' // 自定义参数
};
},
//这里我查看源码的，在ajax请求成功后，发放数据之前可以对返回的数据进行处理，返回什么部分的数据，比如我的就需要进行整改的！
responseHandler: function (res) {
return {
total: res.data.total,
rows: res.data.traineeList
};
},
columns: [{
field: 'id',
title: '序号',
visible: false
}, {
field: 'loginName',
title: '账号'
}, {
field: 'realName',
title: '姓名'
}, {
title: '操作',
field: 'realName',
align: 'center',
formatter: function (value, row, index) {
// value： 默认的值
// row: 行对象
// index: 行序号，从0开始
return '这里是返回字符串';
}
}],
onLoadSuccess: function () {
// 当表格实例化成功后调用的函数
}
})
