bootstrap table表格使用方法详解

适用于Bootstrap 3，现在来详细讲解一下 bootstrap table 表格使用方法：

引入文件

在 HTML 文件中，你需要引入如下文件：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">

<!-- Bootstrap Table JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

可以将链接和脚本放到 <head> 标签内，也可以放到 <body> 标签的底部，以加快页面加载速度。

基本用法

HTML

首先，在 HTML 代码中添加一个表格：

<table id="myTable">
  <thead>
    <tr>
      <th data-field="name">姓名</th>
      <th data-field="age">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jerry</td>
      <td>31</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

注意事项：

<table> 标签需要添加一个 id 属性，以便在 JavaScript 中使用。
表头 thead 和主体 tbody 标签必须添加，否则 bootstrap table 无法识别。
表头每个单元格 <th> 标签必须添加一个 data-field 属性，以指定单元格对应的数据列名。
在主题中的每行 <tr> 标签添加每个单元格 <td> 标签即可。

JavaScript

bootstrap table 最简单的初始化方法如下：

$(document).ready(function(){
  $('#myTable').bootstrapTable();
});

在$(document).ready()函数中执行 bootstrap table 子方法 bootstrapTable()，实现表格的初始化。

示例1

这是一个更全面的示例，包括了 bootstrap table 更多的功能：

<table id="myTable" data-pagination="true" data-search="true" data-sortable="true">
    <thead>
        <tr>
            <th data-field="name" data-align="center">姓名</th>
            <th data-field="age" data-sortable="true">年龄</th>
            <th data-field="email">电子邮件</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td>30</td>
            <td>tom@example.com</td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>31</td>
            <td>jerry@example.com</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>28</td>
            <td>mike@example.com</td>
        </tr>
    </tbody>
</table>

JavaScript 代码：

$(document).ready(function(){
    $('#myTable').bootstrapTable({
        columns:[
            {
                field: 'name',
                title: '姓名'
            },
            {
                field: 'age',
                title: '年龄'
            },
            {
                field: 'email',
                title: '电子邮件'
            }
        ],
        data: [
            {
                name: 'Tom',
                age: 30,
                email: 'tom@example.com'
            },
            {
                name: 'Jerry',
                age: 31,
                email: 'jerry@example.com'
            },
            {
                name: 'Mike',
                age: 28,
                email: 'mike@example.com'
            }
        ],
        pagination: true,
        search: true,
        sortable: true
    });
});

这个示例添加了表格的分页、搜索和排序功能。

常用选项

表格属性

data-page-size：每页显示的行数，对应 data-pagination="true"。
data-height：表格高度，对应 data-height-enabled="true"。

样式

可通过 data-classes 选项来修改样式。比如：

<table data-classes="table table-bordered table-hover table-striped">
  ...
</table>

数据源

bootstrap table 的数据源可以是静态或动态的。

静态数据源：直接在 HTML 中添加数据。

动态数据源：从服务器获取数据。

动态数据源

有多种方式从服务器获取数据。

一种常用的方式是使用 ajax 加载数据：

$(document).ready(function(){
  $('#myTable').bootstrapTable({
    url: 'http://domain.com/data',
    method: 'get',
    dataType: 'json'
  });
});

这个例子使用 jQuery 的 $.ajax() 方法从服务器拉取数据。

事件

bootstrap table 支持许多事件，包括单击行、选择和取消选择行等。如下示例：

$(document).ready(function(){
  $('#myTable').bootstrapTable({
    onCheck: function(row){
      console.log(row);
    },
    onUncheck: function(row){
      console.log(row);
    },
    onClickRow: function(row){
      console.log(row);
    }
  });
});

此示例在单击行时打印行数据，在选择和取消选择行时打印选中的行数据。

方法

bootstrap table 有许多有用的方法，可以通过 jQuery 插件进行缩放和控制。如：

$(document).ready(function(){
  $('#myTable').bootstrapTable('refresh');
  $('#myTable').bootstrapTable('destroy');
});

此示例演示了 refresh() 和 destroy() 方法。refresh() 方法用于刷新表格数据，destroy() 用于销毁表格。

示例2

这是一个带有搜索、分页和排序功能的表格，使用了 ajax 加载数据：

<table id="myTable" data-url="http://domain.com/data" data-pagination="true" data-search="true" data-sortable="true">
    <thead>
        <tr>
            <th data-field="name" data-align="center">姓名</th>
            <th data-field="age" data-sortable="true">年龄</th>
            <th data-field="email">电子邮件</th>
        </tr>
    </thead>
</table>