YouTip

* * jQuery EasyUI Plugin](#) * * * Override the default defaults via `$.fn.pagination.defaults`. Pagination allows users to navigate data through page navigation. It supports configurable options for page navigation and page size selection. Users can add custom buttons to the right side of the pagination to enhance functionality. !(#) ## Dependencies * linkbutton ## Usage Create pagination via markup. Create pagination via javascript. $('#pp').pagination({ total:2000, pageSize:10}); Let's create an ajax pagination using the panel and pagination plugins. When the user selects a new page, the panel will display the corresponding content for that page. The panel at the top displays the content of the first page by default. When the user navigates pages, the 'onSelectPage' event is triggered, which calls the 'refresh' method on 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 the pagination. | 1 | | pageSize | number | The page size. (Note: The maximum number of records per page) | 10 | | pageNumber | number | The page number displayed when creating the pagination. | 1 | | pageList | array | The user can change the page size. The pageList property defines the sizes that can be changed to. Code example: $('#pp').pagination({pageList: [10,20,50,100]}); | [10,20,30,50] | | loading | boolean | Defines whether the data is loading. | false | | buttons | array,selector | Defines custom buttons. Possible values: 1. An array, where each button contains two properties: iconCls: A CSS class that will display a background image handler: The handler function when the button is clicked 2. A selector indicating the buttons. Buttons can be declared via markup: 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 | | layout | array | Defines the pagination layout. This property is available since version 1.3.5. Layout items include one or more of the following values: 1. list: The page size list. 2. sep: The separator for page buttons. 3. first: The first button. 4. prev: The previous button. 5. next: The next button. 6. last: The last button. 7. refresh: The refresh button. 8. manual: Allows manual page number input via an input field. 9. links: The page number links. Code example: $('#pp').pagination({layout:['first','links','last']}); | | | links | number | The 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 | The label displayed before the input component. | Page | | afterPageText | string | The label displayed after the input component. | of {pages} | | displayMsg | string | Display a page information. | Display message: {from} to {to} of {total} pages. | ## Events | Name | Parameters | Description | | --- | --- | --- | | onSelectPage | pageNumber, pageSize | Fires when the user selects a new page. The callback function contains two parameters: 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 the refresh. | | onChangePageSize | pageSize | Fires when the user changes the page size. | ## Methods | Name | Parameters | Description | | --- | --- | --- | | options | none | Returns the options object. | | loading | none | Puts the pagination into the loading state. | | loaded | none | Puts the pagination into the loaded state. | | refresh | options | Refreshes and displays the pagination information. This method is available since version 1.3. Code example: $('#pp').pagination('refresh');// Refresh the pagination bar information $('#pp').pagination('refresh',{// Change options and refresh the pagination bar informationtotal: 114,pageNumber: 6}); | | select | page | Selects a new page. The page index starts from 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 | * * jQuery EasyUI Plugin](#)