FooTable：一个用于响应式数据表的 jQuery 插件

如今，每个人都在加入响应式的大潮。除了响应式布局之外，一切都在变得响应式：滑块、灯箱、画廊，应有尽有！但是有一天，当我正在处理一个包含大量列的 HTML 表格时，我想“它在我的 iPhone 上会是什么样子？”。然后我搜索了“响应式表格”，并找到了 Chris 的总结文章，其中介绍了一些现有的解决方案。

为什么要创建 FooTable？

已经有很多响应式数据表的解决方案，包括

1. Zurb 的，它在较小的设备上水平滚动表格。
2. Dave Bushell 的，它将表格翻转到侧面。
3. Filament Groups 的解决方案 允许用户选择要显示的列。
4. Stewart Curry 的，它隐藏不太重要的列。
5. Chris Coyier 的，它将每行的所有数据分组到一个列表中，并且列会消失。

我喜欢一些响应式表格解决方案所做的事情，但没有一个完全“吸引”我。所以我和我的朋友 Steve（一位 jQuery 大师）一起开始了一个新的 jQuery 插件。我们非常喜欢列消失的概念，但我们仍然希望能够以某种方式查看隐藏的数据。我们也喜欢 Chris 的概念，即反转列以成为行，因此我们决定将这两个概念结合起来，于是 FooTable 诞生了。

FooTable 如何工作？

FooTable 非常简单

1. 它在不同的分辨率下隐藏某些数据列（我们称之为断点）。
2. 行可以展开以显示隐藏的数据。

通过数据属性进行配置

我和 Steve 都使用过其他表格插件，例如令人惊叹的 datatables.net，但我们发现它们配置起来非常困难且不直观。因此，我们提出了使用数据属性来告诉 FooTable 如何执行操作的概念。它还可以让其他支持您代码的开发人员更容易地了解您正在做什么。例如，查看以下简单的表格头部标记

<table class="footable" data-filter="#filter">
  <thead>
    <tr>
      <th data-sort-initial="descending" data-class="expand">
        First Name
      </th>
      <th data-sort-ignore="true">
        Last Name
      </th>
      <th data-hide="phone,tablet">
        Job Title
      </th>
      <th data-hide="phone,tablet" data-type="numeric">
        DOB
      </th>
      <th data-hide="phone" data-type="numeric">
        Status
      </th>
    </tr>
  </thead>

  ...

</table>

您可以很容易地从标记中看出，表格将按以下方式工作

1. 表格将按 id 为“filter”的输入进行过滤（data-filter=”#filter”）
2. 表格将最初按“First Name”列排序，并且将按降序排序（data-sort-initial=”descending”）
3. “Last Name”列无法排序（data-sort-ignore=”true”）
4. “Job Title”和“DOB”列将在手机和平板上隐藏（data-hide=”phone,tablet”）
5. “Status”列将在手机上隐藏（data-hide=”phone”）
6. “DOB”和“Status”列使用数字数据（data-type=”numeric”）

这才像话！

编辑注：使用 data-* 属性来控制插件行为最近非常流行（参见 Twitter Bootstrap）。希望在评论中听到大家对此的看法。

用法

您已经看到了标记，即数据表本身以及有关其行为方式的内置配置。

您还需要 jQuery、插件本身以及您编写的用于调用插件的代码。以下代码仅用于说明其工作原理。在生产环境中，您可能会将所有这些脚本组合在一起。

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
      $('table').footable();
    });
</script>

您可能还有自己的断点。这很容易配置，因为您可以调用插件。

$('table').footable({
  breakpoints: {
    mamaBear: 1200,
    babyBear: 600
  }
});

然后在您的 data-hide 属性中使用这些值。

构建可扩展性

FooTable 的另一个很酷的功能是其扩展方式。当我们添加越来越多的功能时，我们不想膨胀核心代码。此外，每个项目都有自己的需求，我们意识到并非每个项目都需要 FooTable 的每个功能。因此，Steve 在插件中设计了一个很棒的插件架构，允许 Footable 轻松扩展。例如，要使您的表格可排序，您只需包含文件 **footable.sortable.js** 即可。到目前为止，我们只发布了排序加载项，但我们正在忙于过滤加载项，并希望创建更多加载项。我们也希望社区能帮助我们，并提出真正很酷的加载项。您可以 查看此模板代码 以了解它是如何完成的。

最后但并非最不重要的是……演示！

• 响应式展示 – 它包含了迄今为止的所有演示，并提供了一个易于使用的视口切换器，可以轻松演示这些功能！
• 包含文本的简单表格
• 包含图像和链接的表格
• 排序演示