Detaillierte Erläuterung der Verwendung von jQuery-Plug-in-Datentabellen und der Implementierung von Paging-Code
伊谢尔伦
Freigeben: 2017-07-22 09:18:13
Original
3082 Leute haben es durchsucht
DataTables ist ein jQuery-Tabellen-Plug-in.
Erklärung mit Beispielen
1. Anforderungen: Wie in der Abbildung unten gezeigt, den Inhalt von Datentabellen hinzufügen, bearbeiten und löschen.
2. Analyse: Funktion hinzufügen – klicken Sie auf die Schaltfläche „Hinzufügen“, um ein Dialogfeld zum Hinzufügen neuer Inhalte zu öffnen. Bearbeitungsfunktion: Klicken Sie auf „Datentabellen“, um eine Zeile auszuwählen. Dies bedeutet, dass sie ausgewählt wurde. Klicken Sie auf die Schaltfläche „Bearbeiten“, um den Inhalt der von uns ausgewählten Zeile anzuzeigen . Wenn keine Zeile ausgewählt ist und auf die Schaltfläche „Bearbeiten“ geklickt wird, wird das Dialogfeld nicht angezeigt. Wenn auf eine Zeile in Datentabellen doppelgeklickt wird, wird auch ein Dialogfeld angezeigt, und die Farbe der doppelgeklickten Zeile ändert sich. Der Inhalt des Dialogfelds ist der Inhalt der Zeile, auf die wir doppelgeklickt haben. Löschfunktion: Klicken Sie auf Datentabellen, um eine Zeile auszuwählen, klicken Sie auf die Schaltfläche „Löschen“. Daraufhin wird ein Warnfeld angezeigt, in dem Sie gefragt werden, ob der ausgewählte Inhalt gelöscht werden soll. Wenn nichts ausgewählt ist, wird beim Klicken auf die Schaltfläche „Löschen“ kein Warnfeld angezeigt und der Inhalt wird nicht gelöscht. 3. Codierung: Attribute//Name
Beschreibung des obigen Codes: Dieser Code ist hauptsächlich in zwei Teile unterteilt. Ein Teil ist die Deklaration von JQuery-Datentabellen,
; der zweite Teil ist die Deklaration des Dialogs und der für die Operation erforderlichen Aktionen Technologie ohne Seitenaktualisierung. Erforderlicher JS-Code:
Wenn kein thead vorhanden ist, wird ein Fehler gemeldet.
bPaginate: Ob paginiert werden soll, der Standardwert ist true, Paginierung
iDisplayLength: Anzahl der Zeilen pro Seite, Standardanzahl pro Seite: 10
sPaginationType: Paginierungsstil, unterstützt zwei Builds -in Methoden, two_button und full_numbers, two_button wird standardmäßig verwendet.
bLengthChange: Gibt an, ob der Benutzer die Anzahl der Zeilen pro Seite nach der Paginierung über eine Dropdown-Liste auswählen kann. Die Anzahl der Reihen beträgt 10, 25, 50, 100. Diese Einstellung erfordert bPaginate-Unterstützung. Der Standardwert ist „true“.
bFilter: Datenfilterung aktivieren oder deaktivieren, Standardwert ist „true“. Beachten Sie, dass Sie sDom
bInfo:allow verwenden sollten, wenn Sie die Filterfunktion verwenden, aber das standardmäßige Filtereingabefeld deaktivieren möchten oder verbieten Tabelleninformationen Die Anzeige, der Standardwert ist wahr, zeigt Informationen an.
Die einfachste Art, es zu verwenden, ist die Nullkonfiguration.
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von jQuery-Plug-in-Datentabellen und der Implementierung von Paging-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn