Simple Table Paginator In Pure JavaScript – Paginator.js

Preview:

Description:

A simple, dependency-free JavaScript table paginator that convert your long html tables (and even html lists) into multiple pages for more readability.

How to use it:

Download and insert the Paginator.js script into the webpage.

<script src="paginator.js"></script>

The JavaScript to paginate a basic html table.

paginator({
  table: document.getElementById("table-demo").getElementsByTagName("table")[0],
  box: document.getElementById("box"),
});

The JavaScript to paginate an html list.

paginator({
    get_rows: function () {
        return document.getElementById("list").getElementsByTagName("li");
    },
    box: document.getElementById("list_index")
});

All possible options:

• get_rows : Function used to select rows to do pagination on. If no function is provided, checks for a config.table element and looks for rows in there to page.
• box : Empty element that will have page buttons added to it. If no config.box is provided, but a config.table is, then the page buttons will be added using the table.
• table : Table element to be paginated not required if a get_rows function is provided.
• rows_per_page : Number of rows to display per page. default number is 10.
• page : Page to display. Default page is 1.
• box_mode : “list”, “buttons”, or function. determines how the page number buttons are built.
• page_options : false or [{text: , value: }, … ] used to set what the dropdown menu options are available, resets rows_per_page value. False prevents the options from being displayed. [{text: , value: }, … ] allows you to customize what values can be chosen, a value of 0 will display all the table’s rows.
• active_class : Set the class for page buttons to have when active. Defaults to “active”.
• tail_call : Function to be called after paginator is done, and after every turn of the page, or changing of the number of rows per page.
• disable: true or false, shows all rows of the table and hides pagination controlls if set to true.

Changelog:

09/02/2018

• Added “disable” feature