❮ Jeasyui Win Dlg2 Plugins Layout Accordion ❯

jQuery EasyUI Basic Plugin - `Pagination`

The default defaults are overridden by $.fn.pagination.defaults.

Pagination allows users to navigate through data by flipping pages. It supports configurable options for page navigation and page length selection. Users can add custom buttons on the right side of the pagination to enhance functionality.

Dependencies

linkbutton

Usage

Create pagination via markup.

<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"
    data-options="total:2000,pageSize:10">
</div>

Create pagination using JavaScript.

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

$('#pp').pagination({
    total:2000,
    pageSize:10
});

Let's create an AJAX pagination using the panel and pagination plugin. When a user selects a new page, the panel will display the corresponding content for the specified page.

<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'show_content.php?page=1'">
</div>
&lt;div class="easyui-pagination" style="border:1px solid #ccc;"
    data-options="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>

The top panel defaults to displaying content from the first page. When the user navigates pages, the 'onSelectPage' event is triggered, which calls the 'refresh' method for the content panel to load new page content with a new URL parameter.

Properties

Name	Type	Description	Default Value
total	number	The total number of records, should be set when creating pagination.	1
pageSize	number	The page size. (Note: the maximum number of records displayed per page)	10
pageNumber	number	The page number displayed when creating pagination.	1
pageList	array	Allows users to change the page size. The pageList property defines the sizes that can be changed to. <br>Example: $('#pp').pagination({<br> pageList: [10,20,50,100]<br>});	[10,20,30,50]
loading	boolean	Defines if data is loading.	false
buttons	array,selector	Defines custom buttons, possible values: <br>1. Array, each button contains two properties: <br>iconCls: CSS class that will display a background image <br>handler: handler function when the button is clicked <br>2. Selector, indicating the button. <br> <br>Buttons can be declared via markup: <div class="easyui-pagination" style="border:1px solid #ccc" data-options="<br> total: 114,<br> buttons: [{<br> iconCls:'icon-add',<br> handler:function(){alert('add')}<br> },'-',{<br> iconCls:'icon-save',<br> handler:function(){alert('save')}<br> }]"><br></div>Buttons can also be created using JavaScript: $('#pp').pagination({<br> total: 114,<br> buttons: [{<br> iconCls:'icon-add',<br> handler:function(){alert('add')}<br> },'-',{<br> iconCls:'icon-save',<br> handler:function(){alert('save')}<br> }]<br>});	null
layout	array	Pagination layout definition. This property is available since version 1.3.5. <br>Layout items include one or more of the following values: <br>1. list: Page size list. <br>2. sep: Page button separator. <br>3. first: First button. <br>4. prev: Previous button. <br>5. next: Next button. <br>6. last: Last button. <br>7. refresh: Refresh button. <br>8. manual: Manual page number input box that allows input field page numbers. <br>9. links: Page number links. <br> <br>Example: $('#pp').pagination({<br> layout:['first','links','last']<br>});
links	number	Number of links, only valid when the 'links' item is included in 'layout'. This property is available since version 1.3.5.	10
showPageList	boolean	Defines whether to show the page list.	true
showRefresh	boolean	Defines whether to show the refresh button.	true
beforePageText	string	Label displayed before the input component.	Page
afterPageText	string	Label displayed after the input component.	of {pages}
displayMsg	string	Displays a page information.	Showing {from} to {to} of {total} pages.

Events

Name	Parameters	Description
onSelectPage	pageNumber, pageSize	Triggered when the user selects a new page. The callback function contains two parameters: <br>pageNumber: The new page number <br>pageSize: The new page size <br> <br>Example: $('#pp').pagination({<br> onSelectPage:function(pageNumber, pageSize){<br> $(this).pagination('loading');<br> alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);<br> $(this).pagination('loaded');<br> }<br>});
onBeforeRefresh	pageNumber, pageSize	Triggered before the refresh button is clicked, return false to cancel the refresh action.
onRefresh	pageNumber, pageSize	Triggered after the refresh.
onChangePageSize	pageSize	Triggered when the user changes the page size.

Methods

Name	Parameter	Description
options	none	Returns the options object.
loading	none	Sets the pagination to the loading state.
loaded	none	Sets the pagination to the loaded state.
refresh	options	Refreshes and displays pagination information. This method is available since version 1.3. <br>Example: $('#pp').pagination('refresh'); // Refreshes pagination info<br>$('#pp').pagination('refresh',{ // Changes options and refreshes pagination info<br> total: 114,<br> pageNumber: 6<br>});
select	page	Selects a new page. The page index starts from 1. This method is available since version 1.3. <br>Example: $('#pp').pagination('select'); // Refreshes the current page<br>$('#pp').pagination('select', 2); // Selects the second page