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/