Pagination

Override defaults with $.fn.pagination.defaults.

The pagination allows the user to navigate data by page. It supports configurable options for page navigation and page length choices. The user can add customize buttons on right of pagination to enhance its functionality.

Dependencies

Usage Example

Create pagination from markup.

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

Create pagination using javascript.

  1. <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>  
  1. $('#pp').pagination({  
  2.     total:2000,  
  3.     pageSize:10  
  4. });  

Let's create ajax pagination with panel and pagination plugins. When the user select a new page, the panel will display the corresponding content of specified page.

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

The panel on top display the first page content by default. When the user navigate the page, the 'onSelectPage' event will be triggered, in which we call 'refresh' method for the content panel to load new page content with a new URL parameter.

Properties

Name Type Description Default
total number The total records, which should be setted when pagination is created. 1
pageSize number The page size. 10
pageNumber number Show the page number when pagination is created. 1
pageList array User can change the page size. The pageList property defines how many size can be changed.

Code example:

$('#pp').pagination({
	pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolean Defines if data is loading. false
buttons array Defines customize buttons, each button contains two properties:
iconCls: the CSS class which will show a background image
handler: a handler function when button is clicked

The customize buttons can be declared from markup:

<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
		total: 114,
		buttons: [{
			iconCls:'icon-add',
			handler:function(){alert('add')}
		},'-',{
			iconCls:'icon-save',
			handler:function(){alert('save')}
		}]">
</div>

The customize buttons can also be created using javascript:

$('#pp').pagination({
	total: 114,
	buttons: [{
		iconCls:'icon-add',
		handler:function(){alert('add')}
	},'-',{
		iconCls:'icon-save',
		handler:function(){alert('save')}
	}]
});
null
showPageList boolean Defines if to show page list. true
showRefresh boolean Defines if to show refresh button. true
beforePageText string Show a label before the input component. Page
afterPageText string Show a label after the input component. of {pages}
displayMsg string Display a page information. Displaying {from} to {to} of {total} items

Events

Name Parameters Description
onSelectPage pageNumber, pageSize Fires when user select a new page. callback function contains two parameter:
pageNumber: the new page number
pageSize: the new page size

Code example:

$('#pp').pagination({
	onSelectPage:function(pageNumber, pageSize){
		$(this).pagination('loading');
		alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
		$(this).pagination('loaded');
	}
});
onBeforeRefresh pageNumber, pageSize Fires before the refresh button is clicked, return false to cancel the refresh action.
onRefresh pageNumber, pageSize Fires after refresh.
onChangePageSize pageSize Fires when user change the page size.

Methods

Name Parameter Description
options none Return the options object.
loading none Make the pagination to become loading status.
loaded none Make the pagination to become loaded status.
refresh options Refresh and display pager information. This method is available since version 1.3.

Code example:

$('#pp').pagination('refresh');	// refresh the pager bar information
$('#pp').pagination('refresh',{	// change options and refresh pager bar information
	total: 114,
	pageNumber: 6
});
select page Select a new page. The page index start with 1. This method is available since version 1.3.

Code example:

$('#pp').pagination('select');	// refresh the current page
$('#pp').pagination('select', 2);	// select the second page