Pagination

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the pagination
var el = document.querySelector("#pagination");
var pagination = Components.Pagination({
    el: el,
    numberOfPages: 5,
    onClick: function(index, ev) {
        // Log the index
        console.log("The page number selected is: " + index);
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the pagination
let el = document.querySelector("#pagination");
let pagination = Components.Pagination({
    el: el,
    numberOfPages: 5,
    onClick: (index, ev) => {
        // Log the index
        console.log("The page number selected is: " + index);
    }
});

Web Component

// Return the pagination properties return { onClick: function(index, ev) { // Log the index console.log("The page number selected is: " + index); } };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-pagination number-of-pages="5">
    // Return the pagination properties
    return {
        onClick: function(index, ev) {
            // Log the index
            console.log("The page number selected is: " + index);
        }
    };
</bs-pagination>

References

Pagination(props:IPaginationProps):IPagination

PaginationAlignment

Name Value
Center 1
Left 2
Right 3

IPagination

Name Returns Description
el Element The jquery element.

IPaginationProps

Name Type Description
alignment string The alignment type. Reference the PaginationAlignment
className string The class name to apply to pagination.
el HTMLElement The element to render the pagination to.
icon string Renders an icon inplace of the “Next”/”Previous” text values.
isLarge boolean Adds the ‘pagination-lg’ class name.
isSmall boolean Adds the ‘pagination-sm’ class name.
label string The aria-label property.
numberOfPages number The pagination type. Reference the PaginationTypes enumerator
onClick (index:number, ev:Event) => void The pagination item click event.