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>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <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/

EasyUI jQuery searchbox widget

taran910

Improve

Article Tags :

EasyUI jQuery pagination widget

Events:

Methods:

Similar Reads

EasyUI jQuery Base Widgets

EasyUI jQuery Layout Widgets

EasyUI jQuery Menu and Button Widgets

EasyUI jQuery Form Widgets

EasyUI jQuery Window Widgets

EasyUI jQuery DataGrid and Tree Widgets

Thank You!

What kind of Experience do you want to share?