Powerful jquery Table Control footable

footable is a jQuery plugin that allows table to perform better on mobile devices, primarily to turn HTML tables into devices that support a variety of sizes, especially on small-screen devices. You don't have to worry about having too many columns for the table. Footable is a very powerful tabular component. Github:https://github.com/bradvin/FooTable#readme
Open source China:http://www.oschina.net/p/footable
To view all demos, download the zip package, or visit the plugin website

The main goal of a footable is to make it fully accessible through data attributes. We hope you can look at the HTML tags and know exactly what footable to function. take this tag For example one look :

<Tableclass="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 Works "breakpoint" concept, which is different from the table width that we care about. default breakpoint :   

Breakpoints: {  480,  1024x768} 


To create a simple table         :

<Tableclass="Footable" > <Thead> <Tr> <th>name</Th> <ThData-hide="Phone,tablet" >phone</Th> <ThData-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>             

References  footable  core  CSS:

<href=rel=type="text/css"/>   


[optional] include footable theme CSS:

You can use one of our default themes if you wish:

<href=rel=type="Text/css"/>

Reference JQuery:

<src=type="Text/javascript" ></script>   


Reference footable JQuery Plugin:

<src=type="Text/javascript" ></script>   

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

The extensible

Another goal of footable is to make it easy to expand. If your code you will see inside the plugin , the plugin framework , so the extra plug-in can be connected to only include a JavaScript files .

We do not want to footable , so you can only use what you need and leave it all .

add-ons for work :

Sort

Filter

Page out

Strip

Other attached ideas are so far :

Conditional formatting

JSON Loading

Column Selector

Material Bar Recommended Download

Powerful jquery Table Control footable