Skip to content
Related Articles

Related Articles

EasyUI jQuery pagination widget
  • Last Updated : 10 Mar, 2021

In this article, we will learn how to design a pagination widget using jQuery EasyUI. The pagination widget allows the user to navigate data by pages. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

var a = $(".selector").pagination({
});

Properties:

  • total: The total records, which should be set when pagination is created
  • pageSize:The page size
  • pageNumber: Show the page number when pagination is created.
  • pageList: The pageList property defines how many sizes can be changed
  • loading: It defines if data is loading.
  • showPageList: It defines to show a page list.
  • showRefresh: It defines to show refresh button.
  • showPageInfo: It defines to show page information.
  • beforePageText: It shows a label before the input component.
  • afterPageText: It shows a label after the input component.
  • displayMsg: Display a page information

Events:

  • onSelectPage: Fires when the user selects a new page.
  • onBeforeRefresh: Fires before the refresh button is clicked
  • onRefresh: Fires after the refresh.
  • onChangePageSize: Fires when the user changes the page size.

Methods:

  • options: Return the option’s property.
  • loading: Make the pagination to become loading status.
  • loaded: Make the pagination to become loaded status.
  • refresh: Refresh and display pager information.
  • select: Select a new page

CDN Link: First, add jQuery Easy UI scripts needed for your project.



<script type=”text/javascript” src=”jquery.min.js”> </script>  
<!–jQuery libraries of EasyUI —>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>  
<!–jQuery library of EasyUI Mobile —>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script> 

Example:

HTML




<!doctype html> 
<html
  
<head
    <meta charset="UTF-8"
    <meta name="viewport" 
          content="initial-scale=1.0, maximum-scale=1.0, 
                   user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"
    </script
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript" src="jquery.easyui.min.js"
    </script
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"
    </script
  
    <h1>GeeksforGeeks</h1>
    <h3>Easy UI | pagination widget</h3>
</head
  
<body
    <div id="pp" class="easyui-pagination" 
                 style="background:#efefef;border:1px solid #ccc;"
                 data-options="total:2000,pageSize:10">
    </div>
</body>
</html>

Output:

Reference: http://www.jeasyui.com/documentation/

My Personal Notes arrow_drop_up
Recommended Articles
Page :