Check out the getting started demo to see how to setup FooTable.

Include Paginate Add-On

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>

Pagination

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>

Pagination Options

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 ...)

Hide Pagination When There Is Only 1 Page

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.