FooTable - jQuery plugin for responsive HTML tables

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