jQuery EasyUI Basis-Plugin -⟦⟧PaginationPagination

jQuery EasyUI 插件jQuery EasyUI Plugin

Überschreiben Sie die Standardwerte über $.fn.pagination.defaults.

Die Pagination ermöglicht Benutzern, Daten seitenweise zu durchsuchen. Sie unterstützt konfigurierbare Optionen für Seitennavigation und Auswahl der Seitenlänge. Benutzer können benutzerdefinierte Schaltflächen auf der rechten Seite der Pagination hinzufügen, um die Funktionalität zu erweitern.

Abhängigkeiten

  • linkbutton

Nutzung

Pagination über Markup erstellen.

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

Pagination mit JavaScript erstellen.

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

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

Erstellen wir eine AJAX-Paginierung mit den Plugins panel und pagination. Wenn der Benutzer eine neue Seite auswählt, zeigt das Panel den entsprechenden Inhalt der angegebenen Seite an.

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

Das Panel oben zeigt standardmäßig den Inhalt der ersten Seite an. Wenn der Benutzer zwischen Seiten navigiert, wird das Ereignis 'onSelectPage' ausgelöst, das die Methode 'refresh' auf dem Inhalts-Panel aufruft, um neuen Seiteninhalt mit einem neuen URL-Parameter zu laden.

Eigenschaften

Name Type Beschreibung Standardwert
total number Die Gesamtzahl der Datensätze sollte beim Erstellen der Paginierung festgelegt werden. 1
pageSize number Seitengröße. (Hinweis: die maximale Anzahl der pro Seite angezeigten Datensätze) 10
pageNumber number Die Seitennummer, die beim Erstellen der Paginierung angezeigt werden soll. 1
pageList array Benutzer können die Seitengröße ändern. Die Eigenschaft pageList definiert, auf welche Größen geändert werden kann.
Codebeispiel:
$('#pp').pagination({
    pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolesch Legt fest, ob Daten geladen werden. false
buttons array,selector Definiert benutzerdefinierte Schaltflächen, mögliche Werte:
1. Array, jede Schaltfläche enthält zwei Eigenschaften:
iconCls: CSS-Klasse, sie zeigt ein Hintergrundbild an
handler: die Handler-Funktion, wenn auf die Schaltfläche geklickt wird
2. Selector, der die Schaltfläche angibt.

Schaltflächen können über Markup deklariert werden:
<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>
Schaltflächen können auch mit JavaScript erstellt werden:
$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
null
layout array Definition des Paginierungs-Layouts. Diese Eigenschaft ist seit Version 1.3.5 verfügbar.
Layout-Elemente enthalten einen oder mehrere der folgenden Werte:
1. list: Liste der Seitengrößen.
2. sep: Trennzeichen für Seitenschaltflächen.
3. first: erste Schaltfläche.
4. prev: vorherige Schaltfläche.
5. next: nächste Schaltfläche.
6. last: letzte Schaltfläche.
7. refresh: Aktualisieren-Schaltfläche.
8. manual: manuelles Eingabefeld für Seitenzahlen, das die Eingabe von Seitenzahlen ermöglicht.
9. links: Seitenzahl-Links.

Codebeispiel:
$('#pp').pagination({
    layout:['first','links','last']
});
links number Die Anzahl der Links, nur gültig, wenn das Element 'links' in 'layout' enthalten ist. Diese Eigenschaft ist seit Version 1.3.5 verfügbar. 10
showPageList boolesch Legt fest, ob die Seitenliste angezeigt wird. wahr
showRefresh boolesch Legt fest, ob die Aktualisieren-Schaltfläche angezeigt wird. wahr
beforePageText string Beschriftung vor der Eingabekomponente anzeigen. Page
afterPageText string Beschriftung nach der Eingabekomponente anzeigen. von {pages}
displayMsg string Seiteninformationen anzeigen. Seiteninformationen von {from} bis {to} von {total} anzeigen.

Ereignisse

Name Parameters Beschreibung
onSelectPage pageNumber, pageSize Wird ausgelöst, wenn der Benutzer eine neue Seite auswählt. Die Callback-Funktion enthält zwei Parameter:
pageNumber: die neue Seitenzahl
pageSize: die neue Seitengröße

Codebeispiel:
$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});
onBeforeRefresh pageNumber, pageSize Wird ausgelöst, bevor auf die Schaltfläche „Aktualisieren“ geklickt wird; geben Sie false zurück, um die Aktualisierung abzubrechen.
onRefresh pageNumber, pageSize Wird nach dem Aktualisieren ausgelöst.
onChangePageSize pageSize Wird ausgelöst, wenn der Benutzer die Seitengröße ändert.

Methoden

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
loading none Versetzt die Paginierung in den Ladezustand.
loaded none Versetzt die Paginierung in den geladenen Zustand.
refresh options Aktualisiert und zeigt Paginierungsinformationen an. Diese Methode ist seit Version 1.3 verfügbar.
Codebeispiel:
$('#pp').pagination('refresh');    // 刷新分页栏信息
$('#pp').pagination('refresh',{    // 改变选项，并刷新分页栏信息
    total: 114,
    pageNumber: 6
});
select page Wählen Sie eine neue Seite aus. Der Seitenindex beginnt bei 1. Diese Methode ist seit Version 1.3 verfügbar.
Codebeispiel:
$('#pp').pagination('select');    // 刷新当前页面
$('#pp').pagination('select', 2);    // 选择第二页
jQuery EasyUI 插件jQuery EasyUI Plugin Weitere Erweiterungen