Bootstrap-表格

Bootstrap是一款流行的前端开发框架，其中的表格组件可以帮助我们快速创建基于HTML的数据表格，包括排序、分页、搜索和筛选等功能。以下将为您介绍Bootstrap表格的使用方法及常见应用场景。

表格说明

Bootstrap表格具有以下特点：

• 响应式布局，适应各种屏幕尺寸
• 支持标签插件，如图标、进度条、按钮等
• 支持排序、分页、搜索和筛选等功能
• 可以使用CSS样式自定义表格外观

基本用法

创建Bootstrap表格的基本HTML结构如下：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

其中，class="table"表示这是一个Bootstrap表格，<thead>标签用于定义表格头部，<tr>标签用于定义表格行，<th>标签用于定义表格列头，<tbody>标签用于定义表格主体。<scope>属性定义表头单元格的语义。如上述表格为：

|#|First Name|Last Name|Username| |-|----------|---------|--------| |1|Mark |Otto |@mdo | |2|Jacob |Thornton|@fat |

排序和分页

Bootstrap表格默认支持排序和分页功能。添加以下JavaScript代码，即可启用它们：

<script>
  $(document).ready(function() {
    $('.table').DataTable();
  });
</script>

当然，要用到DataTable插件，这个插件并不是原生自带的。

搜索和筛选

Bootstrap表格还支持搜索和筛选功能。只需要在表格头部添加搜索框和筛选下拉菜单，并在初始化时指定相应的选项，即可启用这些功能：

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
    <tr>
      <th>#</th>
      <th>
        <input type="text" class="form-control" placeholder="Search...">
      </th>
      <th>
        <select class="form-control">
          <option>All</option>
          <option>Male</option>
          <option>Female</option>
        </select>
      </th>
      <th>
        <button type="button" class="btn btn-default">Filter</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>

// JavaScript
$(document).ready(function() {
  var table = $('.table').DataTable({
    dom: 'lBfrtip',
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
  });
 
  // Apply the search and filtering
  table.columns().every( function () {
    var that = this;
 
    $( 'input', this.header() ).on( 'keyup change', function () {
      if ( that.search() !== this.value ) {
        that
          .search( this.value )
          .draw();
      }
    } );
 
    $( 'select', this.header() ).on( 'change', function () {
      if ( that.search() !== this.value ) {
        that
          .search( this.value )
          .draw();
      }
    } );
  } );
});

自定义样式

Bootstrap表格可以使用CSS样式来自定义外观。以下是一些常见的自定义样式：

.table-striped {
  background-color: #f9fafb;
}
.table-hover tbody tr:hover {
  background-color: #e4e4e4;
}
.table-bordered, .table-bordered td, .table-bordered th {
  border: 1px solid #dfe1e6;
}

添加以上CSS样式即可启用条纹、悬停和边框功能，注意 CSS 样式的加载顺序。

结论

Bootstrap-表格是开发Web应用程序时必不可少的工具之一。通过使用本文中介绍的用法，您可以快速构建一个响应式、强大且美观的数据表格。希望对您在开发中有所帮助！