Blaze UI is an open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.
Blaze UI Pagination allows implementing the division of a single page into multiple pages and displaying them efficiently. We can separate the content into different pages and then select any one of them.
Blaze UI Pagination attributes:
- pages: It represents the total number of available pages. It accepts the number type value.
- page: It represents the current page. It accepts the number type value.
Blaze UI Pagination Method:
- currentPage(): It returns the current page number.
Blaze UI Pagination Event:
- page(event): This event is triggered when the page changes and returns the current page.
Syntax: Create pagination as follows.
<blaze-pagination id="gfgpage" pages="8" page="1"> </blaze-pagination>
Example 1: In the following example, an alert is shown whenever the page change occurs.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Pagination Events</strong>
<br />
<br />
<blaze-pagination id="gfgpag" pages="15" page="1">
</blaze-pagination>
</center>
</div>
<script>
$('#gfgpag').on('page', async function () {
let cp = await this.currentPage()
alert(`The current page is ${cp}`)
})
</script>
</body>
</html>
|
Output:
Example 2: In the following example, we have two paginations with the page event.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Pagination Events</strong>
<br /><br />
<blaze-pagination id="gfgpag1" pages="15" page="3">
</blaze-pagination>
<blaze-pagination id="gfgpag2" pages="4" page="1">
</blaze-pagination>
</center>
</div>
<script>
$('#gfgpag1').on('page', async function () {
let cp = await this.currentPage()
alert(`The current page is ${cp} of first pagination`)
})
$('#gfgpag2').on('page', async function () {
let cp = await this.currentPage()
alert(`The current page is ${cp} of second pagination`)
})
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/pagination/