jQuery EasyUI Plugin de base -Pagination

jQuery EasyUI 插件jQuery EasyUI Plugin

Remplacez les valeurs par défaut via $.fn.pagination.defaults.

Pagination permet aux utilisateurs de naviguer dans les données par pagination. Il prend en charge des options configurables pour la navigation entre les pages et la sélection de la longueur de page. Les utilisateurs peuvent ajouter des boutons personnalisés à droite de la pagination pour améliorer les fonctionnalités.

Dépendances

  • linkbutton

Utilisation

Créer une pagination via le balisage.

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

Créer une pagination avec JavaScript.

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

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

Créons une pagination AJAX en utilisant les plugins panel et pagination. Lorsque l'utilisateur sélectionne une nouvelle page, le panneau affichera le contenu correspondant 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="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>

Le panneau en haut affiche le contenu de la première page par défaut. Lorsque l'utilisateur navigue entre les pages, l'événement 'onSelectPage' sera déclenché, ce qui appelle la méthode 'refresh' sur le panneau de contenu pour charger le contenu d'une nouvelle page avec un nouveau paramètre d'URL.

Propriétés

Name Type Description Valeur par défaut
total nombre Le nombre total d'enregistrements doit être défini lors de la création de la pagination. 1
pageSize nombre Taille de la page. (Remarque : le nombre maximum d'enregistrements affichés par page) 10
pageNumber nombre Le numéro de page à afficher lors de la création de la pagination. 1
pageList array Les utilisateurs peuvent modifier la taille de la page. La propriété pageList définit les tailles de page disponibles.
Exemple de code :
$('#pp').pagination({
    pageList: [10,20,50,100]
});
[10,20,30,50]
loading booléen Définit si les données sont en cours de chargement. false
buttons tableau, sélecteur Définit des boutons personnalisés, valeurs possibles :
1. Tableau, chaque bouton contient deux propriétés :
iconCls : classe CSS, elle affichera une image d'arrière-plan
handler : la fonction de gestionnaire lorsque le bouton est cliqué
2. Sélecteur, indiquant le bouton.

Les boutons peuvent être déclarés via le balisage :
<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
        total: 114,
        buttons: [{
            iconCls:'icon-add',
            handler:function(){alert('add')}
        },'-',{
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }]">
</div>
Les boutons peuvent également être créés à l'aide de JavaScript :
$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
null
layout array Définition de la disposition de pagination. Cette propriété est disponible depuis la version 1.3.5.
Les éléments de disposition incluent une ou plusieurs des valeurs suivantes :
1. list : liste des tailles de page.
2. sep : séparateur de boutons de page.
3. first : premier bouton.
4. prev : bouton précédent.
5. next : bouton suivant.
6. last : dernier bouton.
7. refresh : bouton d'actualisation.
8. manual : champ de saisie manuelle du numéro de page permettant de saisir des numéros de page.
9. links : liens de numéros de page.

Exemple de code :
$('#pp').pagination({
    layout:['first','links','last']
});
links nombre Le nombre de liens, valide uniquement lorsque l'élément 'links' est inclus dans 'layout'. Cette propriété est disponible depuis la version 1.3.5. 10
showPageList booléen Définit s'il faut afficher la liste des pages. vrai
showRefresh booléen Définit s'il faut afficher le bouton d'actualisation. vrai
beforePageText string Afficher le libellé avant le composant de saisie. Page
afterPageText string Afficher le libellé après le composant de saisie. sur {pages}
displayMsg string Afficher les informations de page. Afficher les informations de page de {from} à {to} sur {total}.

Événements

Name Parameters Description
onSelectPage pageNumber, pageSize Déclenché lorsque l'utilisateur sélectionne une nouvelle page. La fonction de rappel contient deux paramètres :
pageNumber : le nouveau numéro de page
pageSize : la nouvelle taille de page

Exemple de code :
$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});
onBeforeRefresh pageNumber, pageSize Déclenché avant le clic sur le bouton d'actualisation ; renvoyez false pour annuler l'action d'actualisation.
onRefresh pageNumber, pageSize Déclenché après l'actualisation.
onChangePageSize pageSize Déclenché lorsque l'utilisateur modifie la taille de page.

Méthodes

Name Parameters Description
options none Renvoie l'objet options.
loading none Mettre la pagination en état de chargement.
loaded none Mettre la pagination dans l'état loaded.
refresh options Actualiser et afficher les informations de pagination. Cette méthode est disponible depuis la version 1.3.
Exemple de code :
$('#pp').pagination('refresh');    // 刷新分页栏信息
$('#pp').pagination('refresh',{    // 改变选项，并刷新分页栏信息
    total: 114,
    pageNumber: 6
});
select page Sélectionnez une nouvelle page. L'index de page commence à 1. Cette méthode est disponible depuis la version 1.3.
Exemple de code :
$('#pp').pagination('select');    // 刷新当前页面
$('#pp').pagination('select', 2);    // 选择第二页
jQuery EasyUI 插件jQuery EasyUI Plugin Autres extensions