FooTable 是一个 jQuery 插件，让table在移动设备上表现更好，主要的目的是将 HTML 的表格变成支持各种尺寸的设备，特别是在小屏幕设备上显示也是很棒的效果。而不需担心该表格拥有太多的列。FooTable是一个很强大的表格组件。Github：https://github.com/bradvin/FooTable#readme
开源中国:http://www.oschina.net/p/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}


创建一个简单的表：

<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核心的CSS：

<link href=http://www.mamicode.com/"path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />


[可选] include footable主题CSS：

您可以使用我们的一个默认的主题，如果你想的话：

<link href=http://www.mamicode.com/"path_to_your_css/footable.metro.css" rel="stylesheet" type="text/css" />

引用 jQuery：

<script src=http://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


引用 FooTable jQuery Plugin：

<script src=http://www.mamicode.com/"path_to_your_js/footable.js" type="text/javascript"></script>

创建一个FooTable： 

<script type="text/javascript">$(function () {    $(‘.footable‘).footable();});</script>

可扩展的

footable的另一个目标是使它很容易扩展。如果你的代码你会看到里面的插件，插件框架，所以额外的插件可以连接只包括一个JavaScript文件。

我们也不想footable膨胀，所以你只能用你需要的东西，离开了一切。

工作的附加组件：

排序

过滤

分页

条带

其他附加的想法到目前为止是：

条件格式

JSON装载

列选择器

素材吧推荐下载

强大的JQuery表格控件FooTable