强大的JQuery表格控件FooTable

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>[email protected]</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

引用footable核心的CSS：

<link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />


[可选] include footable主题CSS：

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

<link href="path_to_your_css/footable.metro.css" rel="stylesheet" type="text/css" />

引用 jQuery：

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


引用 FooTable jQuery Plugin：

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

创建一个FooTable： 

<script type="text/javascript">
$(function () {

    $(‘.footable‘).footable();

});
</script>

可扩展的

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

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

工作的附加组件：

排序

过滤

分页

条带

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

条件格式

JSON装载

列选择器

素材吧推荐下载