正文

揭秘Bootstrap数据表：轻松实现高效表格布局与交互技巧

/0 浏览量
0319

Bootstrap 是一个流行的前端框架，它提供了许多实用的组件来帮助开发者快速构建响应式和美观的网页。其中，Bootstrap 数据表（Table）组件是一个功能强大的工具，可以用来创建易于阅读、搜索和排序的表格。本文将深入探讨 Bootstrap 数据表的布局与交互技巧，帮助您轻松实现高效的数据表。

一、Bootstrap 数据表布局

Bootstrap 数据表采用响应式设计，能够根据屏幕尺寸自动调整表格的布局。以下是一些基本的布局技巧：

1. 标准表格

标准表格是最常见的布局，使用 <table> 标签创建，并通过 .table 类实现基本样式。

<table class="table">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

2. 精细表格

精细表格在标准表格的基础上，添加了边框和背景色，使得表格内容更加清晰。

<table class="table table-bordered">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

3. 阴影表格

阴影表格通过添加 .table-striped 类，使得表格行之间有明显的分割线。

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

二、Bootstrap 数据表交互

Bootstrap 数据表提供了丰富的交互功能，包括排序、搜索和分页等。

1. 排序

通过添加 .table-hover 类，可以让鼠标悬停在表格行上时显示悬停效果。同时，通过 .sortable 类实现排序功能。

<table class="table table-bordered table-striped table-hover sortable">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

2. 搜索

通过添加 .table-filter 类，可以创建一个搜索框，用于筛选表格内容。

<div class="table-filter">
  <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="搜索...">
</div>

<table class="table table-bordered table-striped table-hover sortable">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

<script>
function searchTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.querySelector(".table-filter table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1]; // 第二列
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

3. 分页

通过添加 .table-pagination 类，可以实现表格分页功能。

<div class="table-pagination">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
  </ul>
</div>

<table class="table table-bordered table-striped table-hover sortable table-pagination">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

三、总结

Bootstrap 数据表组件为开发者提供了丰富的布局和交互功能，使得创建美观、易用的表格变得简单快捷。通过本文的介绍，相信您已经掌握了 Bootstrap 数据表的基本使用方法。在实际开发中，可以根据需求灵活运用这些技巧，打造出令人印象深刻的表格。

-- 展开阅读全文 --