Simple Table Paginator In Pure JavaScript – Paginator.js

Category: Javascript , Table | August 2, 2016
Author: jamesonmccowan
Views Total: 664
Official Page: Go to website
Last Update: August 2, 2016
License: MIT

Preview:

Simple Table Paginator In Pure JavaScript – Paginator.js

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.