【英文】BootstrapTable学习笔记

Posted on Edited on Views:

Preface

Implementing automatically paginated tables with BootstrapTable

Preparation

Importing Dependencies

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>

Collaboration with Vue

  • If using Vue, the following dependencies need to be imported
1
2
<script src="dist/js/vue.js"></script>
<script src="dist/js/bootstrap-table-vue.js"></script>

Generating Table in HTML

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

Configuring the Table in JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById("table").bootstrapTable({
  columns: [],
  data: [],
  // Whether to enable pagination
  pagination: true,
  // Default page number
  pageNumber: 1,
  // Whether to show all columns
  showColumns: true,
  // Number of data per page
  pageSize: 2,
  // Single page data options provided
  pageList: [2, 5]
});

Configuring the Table in Vue.js

  • This example is implemented through collaboration with Vue

Front-end Pagination

  • Front-end pagination requires using data{columns:[],data:[]} to provide data for front-end processing, suitable for tables with no backend or small data volume
  • columns is used to define table headers, title is used to define the header title, field is used to define the field name
  • data is used to define the data, which is composed of an array of objects, where the object’s key is the field field name and the value is the actual data
  • options is used to define the table configuration, both front-end and back-end pagination require table configuration in 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: 'ID',
        field: 'id'
      }, {
        title: 'Name',
        field: 'name'
      }
    ],
    data: [
      {
        id: 1,
        name: "John"
      },{
        id: 2,
        name: "Smith"
      },{
        id: 3,
        name: "David"
      }
    ],
    options: {
      // Whether to enable pagination
      pagination: true,
      // Default page number
      pageNumber: 1,
      // Whether to show all columns
      showColumns: true,
      // Number of data per page
      pageSize: 2,
      // Single page data options provided
      pageList: [2, 5]
    }
  }
});

Back-end Pagination

  • Back-end pagination requires obtaining table data by requesting the backend API
    • BootstrapTable will pass the following parameters by default
      • offset: The index of the first data in the current page in the data table, corresponding to the first parameter of the LIMIT statement in SQL
      • limit: The number of data in the current page, corresponding to the second parameter of the LIMIT statement in SQL
      • More parameters (search, sort, order) can be found in the official documentation
    • BootstrapTable expects the following format of JS object {total: 1, rows: []}
      • total: The number of all data, BootstrapTable uses it to determine the number of pages