文章转载自：问说网 » FooTable高级的响应式表格jQuery插件
文章地址：http://www.uedsc.com/footable.html
FooTable是一个高级jQuery插件，允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格。它可以将HTML表转换成可扩展的响应式表格，且通过单击某一行即可将该行数据隐藏起来。
FooTable 是一个很给力的 jQuery 响应式表格插件，使用它可打造出自适应浏览器宽度的动态表格来。它的实现原理是当宽度变小时自动隐藏表格中的某些列，并以另一种形式呈现它们，即当它们隐藏时你只要点击每一行的第一格就可查看此部分数据。此插件的使用是非常简单的，扩展性也很强。
FooTable特点
- 隐藏不同尺寸的列
- 通过自定义属性设置参数
- 基于Bootstrap框架设计
- 简单的主题设置
- 排序
- 过滤
- 分页
- 易于扩展功能和安装插件
如何使用
首先在 HTML 页面头部中添加 jQuery 框架、 FooTable 插件，具体代码如下：
<link href="footable-0.1.min.css" rel="stylesheet" /> <script src="jquery.1.8.2.min.js"></script> <script src="footable-0.1.js"></script>
接下来添加表格，在需要动态变化的列上添加data属性，默认有两个选择phone(480)和tablet(1024)，这表示在小于这个宽度时此列会隐藏。
<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>Tom Cruise</td> <td>555-99911</td> <td>cruise1@crazy.com</td> </tr> </tbody> </table>
最后初始化插件。
$('.footable').footable();
footable是什么？
footable是一个jQuery插件，使你的HTML表格到膨胀的响应表。这是它是如何工作的：
- 它隐藏了某些列的数据在不同的分辨率（我们称这些断点）。
- 行成为扩展到发现任何隐藏的数据。
那么简单！任何隐藏的数据可以通过单击行看到。
演示
浏览更多的实例页面请访问：http://fooplugins.com/footable-demos/
数据属性配置
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> </table>
所有可用的数据属性中列出：http://fooplugins.com/footable/demos/data-attributes.htm
临界值
footable作品“临界值”的概念，这是不同的表格宽度，我们关心的。默认的断点：
breakpoints: {
phone: 480,
tablet: 1024
}
所以看的标记数据属性配置段，你现在可以说Job Title, DOB 和 Status列将被隐藏在桌子的宽度是小于480（phone）。
还有两个内置临界值称为“default”和“all”。
“default”临界值回退断点时，表格的宽度大于任何定义的临界值。看上面的JS代码片段的“default”的临界值将一旦表宽度大于1024的应用（tablet）。
“所有的断点是非常直接的在它的使用。你总是可以在任何表宽列隐藏应用data-hide=”all” 属性标题。