Skip to content
Related Articles

Related Articles

Blaze UI Pagination Events

View Discussion
Improve Article
Save Article
  • Last Updated : 11 May, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></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.

HTML




<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!