【笔记】BootstrapTable学习笔记

发表于 更新于 阅读次数：

前言

一个基于 Bootstrap 的扩展表格插件，与一些最广泛使用的 CSS 框架集成。（官网）

通过wenzhixin/bootstrap-table实现自动分页表格

引入依赖

1
2
3
4
5
6
7
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1/dist/bootstrap-table.min.css">

<script src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1/dist/bootstrap-table.min.js"></script>

初始化

前端分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table id="app"></table>

<script>
  $("#app").bootstrapTable({
    columns: [
      { field: "id", title: "编号" },
      { field: "name", title: "姓名" }
    ],
    data: [
      { id: 1, name: "张三" },
      { id: 2, name: "李四" },
      { id: 3, name: "王五" }
    ],
    pagination: true,
    pageNumber: 1,
    pageSize: 2,
    showColumns: true,
    pageList: [2, 5]
  });
</script>

后端分页

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
new Vue({
  el: '#table',
  components: {
    'BootstrapTable': BootstrapTable
  },
  data: {
    columns: [
      {
        title: '编号',
        field: 'id'
      }, {
        title: '名称',
        field: 'name'
      }
    ],
    data: [],
    pagination: true,
    pageNumber: 1,
    pageSize: 2,
    showColumns: true,
    pageList: [2, 5],
    // 定义后端分页
    sidePagination: 'server',
    // 定义请求URL
    url: ``,
    // 定义请求方法
    method: 'GET'
  }
});
  • BootstrapTable发送的请求
request
1
GET /?offset=0&limit=20
  • BootstrapTable期望的响应
1
2
3
4
{
  "total": 1,
  "rows": []
}

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
new Vue({
  el: '#table',
  components: {
    'BootstrapTable': BootstrapTable
  },
  data: {
    columns: [
      {
        title: '编号',
        field: 'id'
      }, {
        title: '名称',
        field: 'name'
      }
    ],
    data: [],
    options: {
      pagination: true,
      pageNumber: 1,
      pageSize: 2,
      showColumns: true,
      pageList: [2, 5],
      // 定义后端分页
      sidePagination: 'server',
      // 定义请求URL
      url: ``,
      // 定义请求方法
      method: 'POST',
      // 请求体中的数据格式
      contentType: "application/x-www-form-urlencoded; charset=UTF-8",
      // 解析响应的数据格式
      dataType: "json",
    }
  }
});
  • BootstrapTable发送的请求
request
1
2
3
4
POST /
Content-Type: application/x-www-form-urlencoded; charset=UTF-8

offset=0&limit=20
  • BootstrapTable期望的响应
1
2
3
4
{
  "total": 1,
  "rows": []
}

绑定事件

重新渲染表格数据

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

1
$("#app").bootstrapTable("load", <data>);

销毁表格

1
$("#app").bootstrapTable("destroy");

完成

参考文献

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