Add pagination to your FooTable
Page Size: Navigation Size:
First Name Last Name Job Title DOB Status
Isidra Boudreaux Traffic Court Referee 22 Jun 1972 Active
Shona Woldt Airline Transport Pilot 3 Oct 1981 Disabled
Granville Leonardo Business Services Sales Representative 19 Apr 1969 Suspended
Easer Dragoo Drywall Stripper 13 Dec 1977 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 1991 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 1987 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 1983 Disabled
Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
Judi Badgett Electrical Lineworker 23 Jun 1981 Active
Lauri Hyland Blackjack Supervisor 15 Nov 1985 Suspended

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-first-text="first" (default is «)
  • data-previous-text="prev" (default is ‹)
  • data-next-text="next" (default is ›)
  • data-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.