jQuery EasyUI Tutorial-Pagination (pagination)

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.

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>

2. Use Javascript to create paging controls.

<div id=”pp” style=”background:#efefef;border:1px solid #ccc;”></div>

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

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>

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:

$('#pp').pagination({
	pageList: [10,20,50,100]
});

<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>

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

$('#pp').pagination({
	layout:['first','links','last']
});