Tutoriel jQuery EasyUI-Pagination (pagination)

Cette pagination js est très amusante à utiliser. Je l'utilise souvent moi-même lorsque je travaille sur un projet, je dois toujours parcourir les projets précédents parce que ce n'est pas pratique, je l'ai écrit pour me faciliter la vie et celle des autres.

Utilisez $.fn.pagination.defaults pour remplacer l'objet de valeur par défaut.

Ce contrôle de pagination permet à l'utilisateur de parcourir les données de la page. Il prend en charge les options de navigation dans les pages et de sélection de la longueur des pages. Les utilisateurs peuvent ajouter des boutons personnalisés sur le contrôle de pagination pour améliorer ses fonctionnalités.

Cas d'utilisation :

Créer des contrôles de pagination via des balises et Javascript.

1. Utilisez des étiquettes pour créer des contrôles de pagination.

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

2. Utilisez Javascript pour créer des contrôles de pagination.

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

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

Créons une pagination ajax à l'aide de panneaux et de plugins de pagination. Lorsque l'utilisateur sélectionne une nouvelle page, le panneau affichera le contenu de la page spécifiée.

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

Le contenu de la première page est affiché par défaut sur le panel. Lorsque l'utilisateur navigue sur la page, l'événement « onSelectPage » sera déclenché, le nouveau contenu de la page correspondante sera obtenu en fonction d'un nouveau paramètre d'URL et le contenu sera actualisé dans le panneau de contenu via la méthode « actualiser ».

Attributs :

Événement :

Méthode :

Ce qui précède est le contenu du didacticiel jQuery EasyUI-Pagination. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !

$('#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']
});