bootstraptable 手册_bootstrap table表格使用方法详解

Bootstrap Table 是一个功能强大的开源 jQuery 插件，它可以将简单的 HTML 表格转换为功能丰富、易于使用且可扩展的 Bootstrap 样式表格。下面是 Bootstrap Table 的使用方法：

1. 引入相关文件：在 HTML 文件中引入 jQuery 和 Bootstrap 的相关文件以及 Bootstrap Table 的 CSS 和 JS 文件。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

2. 创建 HTML 表格：在 HTML 文件中创建一个普通的表格。

<table id="myTable">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="price">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>

3. 初始化 Bootstrap Table：在 JavaScript 中使用 Bootstrap Table 插件来初始化表格。

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

此时，你就可以看到一个基本的 Bootstrap Table 表格了。你可以根据自己的需要进行配置和定制，以下是一些常用的配置选项：

- `data-url`：指定从服务器加载数据的 URL。
- `data`：指定表格的数据，可以是一个数组或一个 URL。
- `columns`：定义表格的列，可以包含列的名称、数据字段、格式化函数等。
- `search`：启用搜索功能。
- `pagination`：启用分页功能。
- `sortable`：启用排序功能。
- `showExport`：启用导出功能。

以上是 Bootstrap Table 的基本使用方法和常用配置选项，希望能对你有所帮助。