Pagination

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.