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.
Create pagination from 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 ajax pagination with panel and pagination plugins. When the user select a new page, the panel will display the corresponding content of specified page.
- <div id="content" class="easyui-panel" style="height:200px"
- data-options="href:'show_content.php?page=1'">
- </div>
- <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 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.
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,selector |
Defines custom buttons, possible values: 1) an array, each button contains two properties: iconCls: the CSS class which will show a background image handler: a handler function when button is clicked 2) a selector that indicating the buttons. The 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 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 |
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. |
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 |