First Name | Last Name | Status | ||
---|---|---|---|---|
Isidra | Boudreaux | Active | ||
Shona | Woldt | Disabled | ||
Check out the getting started demo to see how to setup FooTable.
You simply need to include the paginate add-on javascript file to add paging to your table:
<script src="path_to_your_js/footable.paginate.js" type="text/javascript"></script>
Add a empty div to your page, and then tell your FooTable about it by adding a data attribute data-page-navigation=".pagination"
to your table element. Where .pagination
is the selector for the pagination div.
</tbody> <tfoot> <tr> <td colspan="5"> <div class="pagination pagination-centered hide-if-no-paging"></div> </td> </tr> </tfoot> </table>
Set the page size by adding data-page-size="20"
to your table element. (default is 10)
Set the navigation page size by adding data-limit-navigation="5"
to your table element. (default is 0 | disabled)
Set the different paging characters by adding data attributes to the table
data-page-first-text="first"
(default is «)data-page-previous-text="prev"
(default is ‹)data-page-next-text="next"
(default is ›)data-page-last-text="last"
(default is »)data-limit-previous-text="more"
(default is ...)data-limit-next-text="more"
(default is ...)You can easily hide the pagination control by adding class="hide-if-no-paging"
(see above code sample).
To see this in action, check out the Add / Delete row demo and delete a few rows to see the pagination control disappear.
If you want to hide the entire table footer, then add the class to the tfoot element instead:
</tbody> <tfoot class="hide-if-no-paging"> <tr> <td colspan="5"> <div class="pagination pagination-centered"></div> </td> </tr> </tfoot> </table>
Add the class to anything you want to hide within the table when no paging is needed.