Home > Web Front-end > JS Tutorial > body text

jQuery EasyUI Tutorial-Pagination (pagination)

黄舟
Release: 2016-12-27 16:40:07
Original
1851 people have browsed it

This js pagination is very fun to use. I often use it myself. When doing projects, I always have to look at previous projects. Because it is inconvenient, I wrote it out to facilitate myself and others.

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

This paging control allows users to navigate the page's data. It supports options for page navigation and page length selection. Users can add custom buttons on the paging control to enhance its functionality.

jQuery EasyUI Tutorial-Pagination (pagination)

Use case:

Create paging controls through tags and Javascript.

1. Use labels to create paging controls.

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

2. Use Javascript to create paging controls.

<div id=”pp” style=”background:#efefef;border:1px solid #ccc;”></div>
Copy after login
$(‘#pp’).pagination({
total:2000,
pageSize:10
});
Copy after login

Let’s create an ajax pagination using panels and pagination plugins. When the user selects a new page, the panel will display the content of the 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=”
).panel(‘refresh’, ‘show_content.php?page=’+pageNumber);
}”>
</div>
Copy after login

The content of the first page is displayed on the panel by default. When the user navigates the page, the 'onSelectPage' event will be triggered, the new content of the corresponding page will be obtained based on a new URL parameter, and the content will be refreshed to the content panel through the 'refresh' method.

Attribute:

##layoutarrayPaging control layout definition. (This attribute value is available since version 1.3.5) ##afterPageTextstringDisplay a label after the input componentdisplayMsgstringDisplay page information. Event:


jQuery EasyUI Tutorial-Pagination (pagination)

Method:

jQuery EasyUI Tutorial-Pagination (pagination)

The above is the content of jQuery EasyUI Tutorial-Pagination. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!
Attribute nameAttribute value typeDescription
totalnumberTotal number of records, the initial value when the paging control is created.
pageSizenumberPage size.
pageNumbernumberThe number of pages displayed when the paging control is created.
pageListarrayUsers can change the page size. The pageList attribute defines the page number displayed by the page navigation. Code example:
$(&#39;#pp&#39;).pagination({
	pageList: [10,20,50,100]
});
Copy after login
loadingboolean Defines whether data is loading.
buttonsarray Custom buttons, available values ​​are:
①. Each button has 2 attributes:
iconCls: CSS class ID for displaying background images
handler: A handle function called when the button is clicked.

②. The selector object of the existing element on the page (for example: buttons:'#btnDiv') (this attribute value is available since version 1.3.4) Custom buttons can be created through tags:

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

Custom buttons can also be created via Javascript:

$(&#39;#pp&#39;).pagination({
	total: 114,
	buttons: [{
		iconCls:&#39;icon-add&#39;,
		handler:function(){alert(&#39;add&#39;)}
	},&#39;-&#39;,{
		iconCls:&#39;icon-save&#39;,
		handler:function(){alert(&#39;save&#39;)}
	}]
});
Copy after login


Layout options can contain one or more values:
1) list: A list of the number of items displayed on the page.
2) sep: page button dividing line.
3) first: Home button.
4) prev: Previous page button.
5) next: next page button.
6) last: Last page button.
7) refresh: refresh button.
8) manual: Manually enter the input box of the current page.
9) links: page number links.

Sample code:

$(&#39;#pp&#39;).pagination({
	layout:[&#39;first&#39;,&#39;links&#39;,&#39;last&#39;]
});
Copy after login


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 the input component