強大的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裝載

列選擇器

素材吧推薦下載