JQueryEasyUI tutorial-Pagination (paging)

This js paging method is quite easy to use. I often use it on my own. When working on projects, I always need to look at the previous projects. Because it is inconvenient, I can write it out to help myself and help others. This js paging method is quite easy to use. I often use it on my own. When working on projects, I always need to look at the previous projects. Because it is inconvenient, I can write it out to help myself and help others.

Use $. fn. pagination. defaults to override the default object.

This page control allows you to navigate the page data. It supports page navigation and page length selection options. You can add custom buttons on the page control to enhance its functions.

Use Case:

You can create a paging control using tags or Javascript.

1. Create a page control using tags.

2. Create a page control using Javascript.

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

Let's use the Panel and paging plug-in to create an ajax page. When you select a new page, the panel displays the content of the specified page.

The content on the first page is displayed by default on the panel. When you navigate the page, the 'onselectpage' event will be triggered, and the new content of the corresponding page will be obtained based on a new URL parameter, the 'refresh' method is used to refresh the content to the content panel.

Attribute:

Attribute name	Attribute Value Type	Description
Total	Number	Total number of records, the initial value when the paging control is created.
PageSize	Number	Page size.
PageNumber	Number	The number of pages displayed when the paging control is created.
PageList	Array	You can change the page size. The pageList attribute defines the page number displayed in the page navigation. Sample Code: $('#pp').pagination({pageList: [10,20,50,100]});
Loading	Boolean	Define whether data is being loaded.
Buttons	Array	Custom buttons with available values: 1. Each button has two attributes: IconCls: CSS class ID for displaying background images Handler: A handle function called when a button is clicked. ②. The selector object of an element already exists on the page (for example, buttons: '# btnDiv') (This attribute value is available from version 1.3.4). You can create a custom button using the tag: The Custom button 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')}}]});
Layout	Array	Page Control layout definition. (This attribute value is available from version 1.3.5) The layout option can contain one or more values: 1) list: displays the number list on the page. 2) sep: page button split line. 3) first: Home Page button. 4) prev: the previous page button. 5) next: next page button. 6) last: The last page button. 7) refresh: refresh button. 8) manual: manually enter the input box on the current page. 9) links: links to the number of pages. Sample Code: $('#pp').pagination({layout:['first','links','last']});
ShowPageList	Boolean	Define whether to display the page navigation list
ShowRefresh	Boolean	Define whether to display the refresh button
BeforePageText	String	Display a label before entering the component
AfterPageText	String	A label is displayed after the component is input.
DisplayMsg	String	Displays page information.

Event:

The above is the content of Pagination (Pagination) in the jQuery EasyUI tutorial. For more information, see PHP Chinese website (www.php1.cn )!