Filtering
Include filtering in your FooTable.First Name | Last Name | Job Title | BOB | Status |
---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | Suspended |
Garrett | Accountant | Tokyo | 63 | Active |
Cox | Author | San | 66 | Disabled |
Kelly | Brielle | Edinburgh | 22 | Active |
Airi Satou | Accountant | Tokyo | 33 | Active |
Brielle | Specialist | New York | 61 | Disabled |
Herrod Chandler | Sales Assistant | San | 59 | Suspended |
Rhona Davidson | Specialist | Tokyo | 55 | Active |
Colleen Hurst | Javascript Developer | San | 39 | Disabled |
Sonya Frost | Software | Edinburgh | 23 | Suspended |
Jena Gaines | Office Manager | London | 30 | Active |
Flynn | Support Lead | Edinburgh | 22 | Disabled |
Charde Marshall | Regional Director | San | 36 | Suspended |
Haley Kennedy | Senior Marketing Designer | London | 43 | Active |
Tatyana Fitzpatrick | Regional Director | London | 19 | Disabled |
Michael Silva | Marketing Designer | London | 66 | Suspended |
Paul Byrd | (CFO) | New York | 64 | Active |
Gloria Little | Systems Administrator | New York | 59 | Disabled |
Bradley Greer | Software | London | 41 | Suspended |
Include Files
<!--Foo Table Grid-->
<link rel="stylesheet" href="plugins/foo-table/css/footable.bootstrap.min.css">
<link rel="stylesheet" href="plugins/foo-table/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="plugins/foo-table/css/footable.standalone.min.css">
<!--FOO Table JS-->
<script src="plugins/foo-table/js/footable.min.js"></script>
<script src="plugins/foo-table/js/foo-table-custom.js"></script>
<script>
$(document).ready(function () {
$('#demo-foo-filtering').footable({
"paging": {
"enabled": true
},
"sorting": {
"enabled": true
}
});
});
</script>
Html Usage
<table id="demo-foo-filtering" class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th data-breakpoints="xs">Last Name</th>
<th data-breakpoints="xs">Job Title</th>
<th data-breakpoints="xs">BOB</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td><span class="tag tag-danger"> Suspended</span>
</td>
</tr>
<tr>
<td>Garrett</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td><span class="tag tag-danger"> Active</span>
</td>
</tr>
</tbody>
</table>