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