Table Table Table Paginator Examples Examples

Normal Table

Basic example of the paginator function. A table and a place to put the page link are passed to it, as well as a class to style the current page's button.



Code: 
paginator({
    table: document.getElementById("table_box_native").getElementsByTagName("table")[0],
    box: document.getElementById("index_native"),
    active_class: "color_page"
});

Table with Bootstrap Pagination

This changes things up a bit by using a different box mode, and not providing a box to put the page buttons in. setting the box mode to "list" builds the page buttons to use Bootstrap's pagination. The paginator function returns the box element with the page buttons and let's the programmer place it. Catching and placing the box element isn't needed if a box element is provided in the configuration object



Code: 
var box = paginator({
    table: document.getElementById("table_box_bootstrap").getElementsByTagName("table")[0],
    box_mode: "list",
});
box.className = "box";
document.getElementById("table_box_bootstrap").appendChild(box);

List

Instead of paginating a table, this example provides it's own function for getting the "rows" to be paginated. Normally the paginator function accepts a table object and figures things out for itself. Because you can provide your own selector function, the paginator function is thus capable of paginating anything you can select.



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