JavaScript/CSS/HTML || TablePagination.js – Simple Add Pagination To Any Table Using Vanilla JavaScript

Print Friendly, PDF & Email

The following is a module which allows for simple yet fully customizable table pagination in vanilla JavaScript.

With multiple options, as well as multiple callback functions to modify the pagination buttons and information text, almost all the ways you can think of pagination is supported by this module. It’s look and feel can also be adjusted via CSS.

TablePagination.js & CSS Source

Contents

1. Basic Usage
2. Available Options
3. Only Show Page Numbers
4. Mini - Only Show Arrow Buttons
5. Show All Pages
6. Only Show Go Input
7. Format Navigation Text
8. Button Click Event
9. Navigation Position
10. Specify Initial Page
11. Navigation Binding Area
12. Remove Pagination
13. TablePagination.js & CSS Source
14. More Examples


1. Basic Usage

Syntax is very straightforward. The following demonstrates adding pagination to a table.

Calling ‘TablePagination.page‘ with no options will add pagination with all of the default options applied to it. It accepts one or more HTMLTableElement.


Sample:

Sample



2. Available Options

The options supplied to the ‘TablePagination.page‘ function is an object that is made up of the following properties.

Supplying different options to ‘TablePagination.page‘ can change its appearance. The following examples below demonstrate this.



3. Only Show Page Numbers

The following example demonstrates pagination with only page numbers.


Sample:

Sample



4. Mini – Only Show Arrow Buttons

The following example demonstrates pagination with only arrow buttons.


Sample:

Sample



5. Show All Pages

The following example demonstrates pagination showing all page numbers.


Sample:

Sample



6. Only Show Go Input

The following example demonstrates pagination with only showing the “Go” user input option.


Sample:

Sample



7. Format Navigation Text

The following example demonstrates pagination formatting the navigation text. This allows to alter the navigation text without having to modify the pagination code!


Sample:

Sample



8. Button Click Event

The following example demonstrates pagination with the button click callback. This allows you to do something on button click


Sample:

Sample



9. Navigation Position

The following example demonstrates formatting the navigation position. The position options can be on top, or bottom. Bottom is the default position.


Sample:

Sample



10. Specify Initial Page

The following example demonstrates pagination setting the initial default page.


Sample:

Sample



11. Navigation Binding Area

By default, the navigation controls are placed either above or below the table element, depending on the ‘navigationPosition’ value. You can override this placement by specifying the container where the controls should be bound to.

The following example demonstrates specifying the element where the controls are bound to.


Sample:

Sample



12. Remove Pagination

The following example demonstrates how to remove pagination from a table.

TablePagination.remove‘ will remove pagination. It accepts one or more HTMLTableElement.



13. TablePagination.js & CSS Source

The following is the TablePagination.js Namespace & CSS Source. Include this in your project to start using!

The following is TablePagination.css.



14. More Examples

Below are more examples demonstrating the use of ‘TablePagination.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?
👍 YesNo

Leave a Reply