强大的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>[e-mail]</td> </tr> <tr> <td>Bridget Jones</td> <td>544-776655</td> <td>[e-mail]</td> </tr> <tr> <td>Tom Cruise</td> <td>555-99911</td> <td>[e-mail]</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装载

列选择器

素材吧推荐下载