EasyUI jQuery pagination widget
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 >w3wiki</ 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/