Simple Table Paginator In Pure JavaScript – Paginator.js

Category: Javascript , Table | September 3, 2018
Views Total:41,639 views
Official Page:Go to website
Last Update:September 3, 2018


Simple Table Paginator In Pure JavaScript – Paginator.js


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.

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

The JavaScript to paginate an html list.

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



  • Added “disable” feature

You Might Be Interested In:

One thought on “Simple Table Paginator In Pure JavaScript – Paginator.js

  1. Travis Redington

    Hi – Thanks for this. Wondering if option or config option for box_mode to limit the number of buttons – currently there are too many displayed at one time. Thanks again!


Leave a Reply