README

FooTable 是一个 jQuery 插件，旨在让小设备上的 HTML 表格看起来很棒 - 无论您在这些表格中有多少列数据。

主页 | WordPress 插件（免费） | 演示

功能

在不同尺寸下隐藏某些列
通过数据属性进行配置
与 Bootstrap 兼容
易于主题化
排序
过滤
分页
易于通过插件扩展

什么是 FooTable？

FooTable 是一个 jQuery 插件，可以将您的 HTML 表格转换为可展开的响应式表格。这是它的工作原理

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

非常简单！只需点击行即可始终看到隐藏的数据。

演示

查看越来越多的 FooTable 演示（带内置文档！）

文档

文档已内置到演示中！在每个演示页面上，都有一个文档选项卡，概述了如何使用特定功能。

数据属性配置

FooTable 的主要目标之一是通过数据属性使其完全可配置。我们希望您能够查看 HTML 标记，并确切地看到 FooTable 将如何运行。以下是一个示例

<table class="footable" data-filter="#filter" data-page-size="5">
  <thead>
    <tr>
      <th data-toggle="true">
        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-name="Date Of Birth">
        DOB
      </th>
      <th data-hide="phone">
        Status
      </th>
    </tr>
  </thead>

所有可用的数据属性都在数据属性演示中列出

断点

FooTable 与“断点”的概念一起工作，这是我们关心的不同表格宽度。默认断点是

breakpoints: {
  phone: 480,
  tablet: 1024
}

因此，查看“数据属性配置”部分的标记，您现在可以知道当表格宽度低于 480（手机）时，职位、出生日期 和状态列将被隐藏。

还有两个内置的断点称为“默认”和“全部”。

“默认”断点是当前表格宽度大于任何定义的断点时的回退断点。查看上面的 JS 片段，当表格宽度大于 1024（平板电脑）时，“默认”断点将被应用。

“全部”断点使用起来非常简单。您可以通过将 data-hide="all" 属性应用到标题中来在任何表格宽度下隐藏列。

使用方法

创建一个简单的表格（别忘了为 thead 中的每个列设置数据属性！）

<table class="footable">
  <thead>
    <tr>
      <th>Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone,tablet">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
    </tr>
  </tbody>
</table>

包含 FooTable Core CSS

```

[可选] 包含 FooTable 主题 CSS

FooTable 现在已构建为与 Twitter Bootstrap 兼容 - 哇！

如果您想的话，可以使用我们内置的主题之一

```

查看 metro 主题演示或原始主题演示。

包含 jQuery


4. **Include FooTable jQuery Plugin**

    ```html
<script src="path_to_your_js/footable.js" type="text/javascript"></script>

初始化FooTable！


Extensible
----------

Another goal of FooTable was to make it easily extensible. If you look at the code you will see that there is a plugin framework within the plugin, so extra mods can be attached just by including another javascript file.

We also didn't want to bloat FooTable, so you can only use what you need and leave out everything else.

Working add-ons:

* sorting
* filtering
* pagination (thanks @awc737)
* striping (thanks @OliverRC)

Other add-on ideas so far are:

* conditional formatting
* json loading
* column picker

Thanks
------

We would not have created FooTable without inspiration from others. Thanks must be given to:

* Catalin for his [original table CSS](http://www.red-team-design.com/practical-css3-tables-with-rounded-corners)
* [@awc737](https://github.com/awc737) for creating the pagination add-on
* [@OliverRC](https://github.com/OliverRC) for creating the striping add-on
* [Chris Coyier](https://css-tricks.cn/responsive-data-tables/) (also check out Chris' [responsive table roundup post](https://css-tricks.cn/responsive-data-table-roundup/))
* [Zurb](http://www.zurb.com/playground/responsive-tables)
* [Dave Bushell](http://dbushell.com/2012/01/05/responsive-tables-2/)
* [Filament Group](http://filamentgroup.com/examples/rwd-table-patterns/)
* [Stewart Curry](http://www.irishstu.com/stublog/2011/12/13/tables-responsive-design-part-2-nchilds/)

filsh / footable

维护者

详细信息

README

功能

什么是 FooTable？

演示

文档

数据属性配置

断点

使用方法