Arbeiten mit Jquery DataTables

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:

   <code class="language-html"><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>
   </code>

   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:

   <code class="language-html"><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></code>

   und die JavaScript -Initialisierung:

   <code class="language-javascript">$('#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="'%20+%20url%20+%20'">' + url + '</a>'; }
     }, {
       "aTargets": [3],
       "sType": "date",
       "mRender": function(date, type, full) {
         return (full[2] == "Blog") ? new Date(date).toDateString() : "N/A";
       }
     }]
   });</code>

   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!