【笔记】BootstrapTable学习笔记

发表于 更新于 阅读次数：

前言

使用BootstrapTable实现自动分页的表格

准备工作

引入依赖

1
2
3
4
5
6
7
8
9
10
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link rel="stylesheet" href="dist/css/bootstrap-table.css">

<script src="dist/js/jquery.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>

<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/bootstrap.bundle.js"></script>
<script src="dist/js/bootstrap-table.js"></script>
<script src="dist/js/bootstrap-table-zh-CN.min.js"></script>

与Vue合作

  • 如果配合Vue，需要引入下面的依赖
1
2
<script src="dist/js/vue.js"></script>
<script src="dist/js/bootstrap-table-vue.js"></script>

HTML生成表格

1
2
3
<div id="table">
  <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
</div>

JS配置表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById("table").bootstrapTable({
  columns: [],
  data: [],
  // 是否开启分页
  pagination: true,
  // 默认页码
  pageNumber: 1,
  // 是否显示所有列
  showColumns: true,
  // 单页数据数
  pageSize: 2,
  // 提供的单页数据选项
  pageList: [2, 5]
});

Vue.js配置表格

  • 本案例是通过与Vue的合作实现的

前端分页

  • 前段分页需要通过data{columns:[],data:[]}将数据堆给前段做处理，适合没有后端或者数据量较小的表格
  • columns用来定义表头，title用来定义表头的标题，field用来定义字段名
  • data用来定义数据，数据是由对象数组组成的，每个对象的键就是field字段名、值就是实际数据
  • options用来定义表格配置，无论前端分页还是后端分页，都需要在options中进行表格配置
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
new Vue({
  el: '#table',
  components: {
    'BootstrapTable': BootstrapTable
  },
  data: {
    columns: [
      {
        title: '编号',
        field: 'id'
      }, {
        title: '名称',
        field: 'name'
      }
    ],
    data: [
      {
        id: 1,
        name: "张三"
      },{
        id: 2,
        name: "李四"
      },{
        id: 3,
        name: "王五"
      }
    ],
    options: {
      // 是否开启分页
      pagination: true,
      // 默认页码
      pageNumber: 1,
      // 是否显示所有列
      showColumns: true,
      // 单页数据数
      pageSize: 2,
      // 提供的单页数据选项
      pageList: [2, 5]
    }
  }
});

后端分页

  • 后段分页需要通过请求后端接口得到表格数据

    • BootstrapTable默认将会传递以下参数
      • offset：当前页的第一个数据在数据表中的下标，对应SQL中LIMIT语句的第一个参数
      • limit：当前页的数据个数，对应SQL中LIMIT语句的第二个参数
      • 更多参数（search、sort、order）详见官网文档
    • BootstrapTable期望得到以下格式的JS对象{total: 1, rows: []}
      • total：所有数据的个数，BootstrapTable通过它来判断页数
      • rows：当前页的所有数据的数组

  • 如果前段请求的数据不止有默认的offset、limit、search、sort、order参数，可以通过queryParams: function(e) {}来添加额外的参数，通过return返回格式化后的请求参数

  • 如果后端响应的数据格式不是{total: 1, rows: []}，可以通过responseHandler: function(result) {}来重新格式化，通过return返回格式化后的响应数据

GET请求

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
new Vue({
  el: '#table',
  components: {
    'BootstrapTable': BootstrapTable
  },
  data: {
    columns: [
      {
        title: '编号',
        field: 'id'
      }, {
        title: '名称',
        field: 'name'
      }
    ],
    data: [],
    options: {
      // 是否开启分页
      pagination: true,
      // 默认页码
      pageNumber: 1,
      // 是否显示所有列
      showColumns: true,
      // 单页数据数
      pageSize: 2,
      // 提供的单页数据选项
      pageList: [2, 5],
      // 定义后端分页
      sidePagination: 'server',
      // 定义请求URL
      url: ``,
      // 定义请求方式
      method: 'GET'
    }
  }
});

POST请求

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
new Vue({
  el: '#table',
  components: {
    'BootstrapTable': BootstrapTable
  },
  data: {
    columns: [
      {
        title: '编号',
        field: 'id'
      }, {
        title: '名称',
        field: 'name'
      }
    ],
    data: [],
    options: {
      // 是否开启分页
      pagination: true,
      // 默认页码
      pageNumber: 1,
      // 是否显示所有列
      showColumns: true,
      // 单页数据数
      pageSize: 2,
      // 提供的单页数据选项
      pageList: [2, 5],
      // 定义后端分页
      sidePagination: 'server',
      // 定义请求URL
      url: ``,
      // POST请求注意修改此处：定义请求方式
      method: 'POST',
      // POST请求注意添加此处：请求体中的数据格式（网上大部分人说这个是配置期待返回数据类型）
      dataType: "json",
      // POST请求注意添加此处：请求数据内容格式（缺省值是：`application/json`）
      // contentType: "application/x-www-form-urlencoded; charset=UTF-8"
    }
  }
});

更多表格配置

  • 在这里列出常见表格配置，更多配置详见官网文档
  • 对于Vue，需要将除了columns、data以外的配置放在options中
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
document.getElementById("table").bootstrapTable({
  columns: [],
  data: [],
  // 指定行高，单位px，如果没有设置height属性，表格自动根据记录条数决定表格高度
  height: 500,
  // 是否开启分页
  pagination: true,
  // 默认页码
  pageNumber: 1,
  // 单页数据数
  pageSize: 2,
  // 提供的单页数据选项，如果不希望有这个功能，可以将数组中只包含一个数据，与单页数据数保持相同
  pageList: [2, 5],
  // 是否显示隔行着色
  striped: true,
  // 是否启用缓存
  cache: false,
  // 排序方式
  sortOrder:"asc",
  // 是否启用点击选中行
  clickToSelect: true,
  // 最少允许的列数
  minimumCountColumns: 2,
  
  /* 按钮显示配置 */
  // 是否显示刷新按钮
  showRefresh: false,
  // 是否显示右上角列选择按钮
  showColumns: false,
  // 是否显示详细视图和列表视图的切换按钮
  showToggle: true,
  // 是否显示右上角切换列按钮
  showColumns: false,
  // 页码靠左
  paginationHAlign: "left",
  
  /* 数据导入导出配置 */
  // 是否显示导出
  showExport: true,
  // 导出数据类型`basic`、`all`、`selected`
  exportDataType: "all",
  
  /* 后端分页配置 */
  // 分页数据得到的方式，如果是`client`（缺省值）就是前段分页，如果是`server`就是后端分页
  sidePagination: 'server',
  // 如果是后端分页，需要指定请求URL
  // url: ``,
  // 指定请求方式，缺省值：`GET`
  // method: 'POST',
  // POST请求注意添加此处：请求体中的数据格式（网上大部分人说这个是配置期待返回数据类型）
  dataType: "json",
  // POST请求注意添加此处：请求数据内容格式（缺省值是：`application/json`）
  // contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  // 查询参数组织方式
  //  如果查询参数组织方式为`undefined`：则可以获取：`pageNumber`、`pageSize`、`searchText`、`sortName`、`sortOrder`
  //  如果查询参数组织方式为`limit`：则可以获取：`limit`、`offset`、`search`、`sort`、`order`
  queryParamsType: "undefined",
  // 请求参数处理
  queryParams: function (e) {
    return {
      // 内置的参数可以通过e调取
      offset: e.offset,
      limit: e.limit,
      // 自定义参数也可以定义
      ...
    }
  },
  // 响应数据处理
  responseHandler: function (result) {
    return {
      // 所有数据的行数
      total: 1,
      // 所有数据的数组
      rows: [{}, {}]
    }
  },
  
  /* 排序配置 */
  // 是否显示排序
  sortable: true,
  // 如果显示排序，可以设置排序方式
  // sortOrder: "asc",
  
  /* 搜索配置 */
  // 是否开启搜索
  search: false,
  // 是否开启回车搜索
   searchOnEnterKey: false,
  // 搜索框对其方式
  searchAlign: "right",
  // 全局匹配
  strictSearch: true,
  // 模糊搜索
  strictSearch: false,
  
  /* 事件函数 */
  // 加载成功函数
  onLoadSuccess: function (res) {
  },
  // 加载失败函数
  onLoadError: function () {
  },
  
  /* 翻译 */
  paginationPreText : "上一页",
  paginationNextText : "下一页"
  
});

去除左下角分页信息

  • JS中在配置中为分页信息添加类名
1
paginationDetailHAlign: ' hidden',
  • CSS中通过类名隐藏分页信息
1
2
3
.hidden {
  display: none;
}

重新渲染数据

<data>：更新后的数据（对象数组）

1
document.getElementById("table").bootstrapTable("load", <data>);

销毁表格数据

1
document.getElementById("table").bootstrapTable("destroy");

页码居左对齐

  • 删除页码的居右属性，页码将会自动居左对齐

只有已经完成BootstrapTable渲染之后才能通过这种方式使页码居左对齐

1
document.getElementsByClassName("float-right pagination")[0].classList.remove("float-right");

完成

参考文献

CSDN——小白能否逆袭
BootstrapTable
PHP中文网
CSDN——清清泪
CSDN——manbufenglin
码上敲享录
CSDN——weixin_30276935
CSDN——Spring是框架不是春天
CSDN——新来的大狮
CSDN——二萌偏