DataTables: Eine umfassende Anleitung zur Verbesserung der Tabelle JQuery

DataTables ist ein leistungsstarkes JQuery -Plugin, das grundlegende HTML -Tabellen in interaktive Datennetze umwandelt. Es fügt mühelos Funktionen wie Suche, Sortieren und Pagination hinzu, auch ohne benutzerdefinierte Konfiguration. In diesem Handbuch wird die Kernfunktionalit?t und erweiterte Funktionen von Datatables untersucht.

Schlüsselmerkmale:

• mühelose Verbesserung:
DataTables verbessert HTML -Tabellen mit Such-, Sortier- und Paginierungsfunktionen mit minimalem Setup.
• Vielseitige Datenquellen:
Es integriert sich nahtlos in Daten aus HTML -Tabellen, JavaScript -Arrays oder Remote -Quellen über Ajax.
• ungarische Notation: n DataTables verwendet ungarische Notation für die variable Benennung (z. B. o für Knoten, a für Objekt,
für Array), Verbesserung der Code -Lesbarkeit und Verst?ndnis.
• Erweiterte Anpassung: mRender bietet umfangreiche Anpassungsoptionen, einschlie?lich Spaltenrendering (
), serverseitige Verarbeitung für gro?e Datens?tze und Integration mit verschiedenen Erweiterungen.
• Zustand Persistenz: localStorage Unterstützt das Speichern von Tabellenstatus (Pagination, Suche) über Seiten -Aktualisierungen mit
oder benutzerdefinierten Rückrufe, die die Benutzererfahrung verbessern.

Erste Schritte:

1. enthalten Bibliotheken:

   Die DataTable -Bibliothek und die neueste JQuery -Version in Ihr HTML einbeziehen. Sie k?nnen eine CDN verwenden oder die Dateien herunterladen.

2. Grundlegende Initialisierung: dataTable() Um Datentabellen auf eine Tabelle anzuwenden, verwenden Sie einfach die

   -Methode:

   <table id="example">
     <thead>
       <tr><th>Sites</th></tr>
     </thead>
     <tbody>
       <tr><td>SitePoint</td></tr>
       <tr><td>Learnable</td></tr>
       <tr><td>Flippa</td></tr>
     </tbody>
   </table>
   <??>

   Dies erstellt eine durchsuchbare und sortierbare Tabelle. Siehe das Beispiel unten:

   

3. Arbeiten mit Arrays:

   Datatables kann auch Daten aus JavaScript -Arrays verarbeiten. Erstellen wir eine Tabelle mit mehreren Spalten:

   <table id="example">
     <thead>
       <tr>
         <th class="site_name">Name</th>
         <th>Url</th>
         <th>Type</th>
         <th>Last modified</th>
       </tr>
     </thead>
     <tbody></tbody>
   </table>

   und die JavaScript -Initialisierung:

   $('#example').DataTable({
     "aaData": [
       ["Sitepoint", "https://www.sitepoint.com", "Blog", "2013-10-15 10:30:00"],
       ["Flippa", "http://flippa.com", "Marketplace", null],
       // ... more data
     ],
     "aoColumnDefs": [{
       "sTitle": "Site name",
       "aTargets": ["site_name"]
     }, {
       "aTargets": [1],
       "bSortable": false,
       "mRender": function(url) { return '<a href="' + url + '">' + url + '</a>'; }
     }, {
       "aTargets": [3],
       "sType": "date",
       "mRender": function(date, type, full) {
         return (full[2] == "Blog") ? new Date(date).toDateString() : "N/A";
       }
     }]
   });

   mRender Dieses Beispiel zeigt eine benutzerdefinierte Rendering (null) für URLs und die Spalte "Letzte modifizierte", die

   Werte anmutig bearbeitet. Das Ergebnis:

   

Erweiterte Techniken:

• serverseitige Verarbeitung:

  Für gro?e Datens?tze ist die serverseitige Verarbeitung von entscheidender Bedeutung. DataTables sendet Anforderungen an den Server für bestimmte Datenseiten und verbessert die Leistung. Der Server sollte Daten in einem bestimmten JSON -Format zurückgeben.

• Erweiterungen:

  DataTables bietet zahlreiche Erweiterungen, um Funktionen wie Schaltfl?chen, Spaltenfilterung, Zeilenauswahl und mehr zu addieren. <script> $(document).ready( function () { $('#example').DataTable(); } ); </script>

h?ufig gestellte Fragen (FAQs):

Das Originaldokument enthielt einen umfassenden FAQ-Abschnitt, der benutzerdefinierte Schaltfl?chen, serverseitige Verarbeitung, Styling, Suchfelder, Pagination, Spaltenfilterung, Zeilenauswahl, Spaltenüberarbeitung, Spalten-Sichtbarkeitssteuerung und Exportfunktionalit?t abdeckte. Dies sind alles erweiterte Themen, die am besten über die offizielle Datentables -Dokumentation und Beispiele behandelt werden. In jeder Frage wurden die spezifischen Optionen und Codeausschnitte beschrieben, die für die Implementierung erforderlich sind. Aus Platzbeschr?nkungen habe ich diesen Abschnitt hier weggelassen, aber die Informationen sind im ursprünglichen Eingang leicht verfügbar.

Diese überarbeitete Antwort bietet einen pr?gnanteren und organisierten überblick über DataTables, w?hrend die Kerninformationen und Beispiele aus dem Originaltext beibehalten. Denken Sie daran, die offizielle Dokumentation von Datatables für detaillierte Informationen und die aktuellsten Best Practices zu konsultieren.

Das obige ist der detaillierte Inhalt vonArbeiten mit Jquery DataTables. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!