bootstrap table 基本使用

前言

bootstrap tabel是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

主要功能

  1. 支持 Bootstrap 3 和 Bootstrap 2
  2. 自适应界面
  3. 固定表头
  4. 非常丰富的配置参数
  5. 直接通过标签使用
  6. 显示/隐藏列
  7. 显示/隐藏表头
  8. 通过 AJAX 获取 JSON 格式的数据
  9. 支持排序
  10. 格式化表格
  11. 支持单选或者多选
  12. 强大的分页功能
  13. 支持卡片视图
  14. 支持多语言
  15. 支持插件

相关文档
官方网站

示例（后台分页，动态获取数据）

html部分

1
2
<!-- 用来实例化表格的容器 -->
<table id="example-table" class="table table-striped mb-none"></table>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$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 () {
        // 当表格实例化成功后调用的函数
    }
})