Einführung in Datatables
DataTables ist ein jQuery-Tabellen-Plug-in. Dabei handelt es sich um ein hochflexibles Tool, das auf progressiven Verbesserungen basiert und erweiterte interaktive Steuerelemente und Unterstützung für jedes HTML-Formular hinzufügt. Hauptmerkmale:
Automatische Paging-Verarbeitung
Echtzeit-Tabellendatenfilterung
Datensortierung und automatische Erkennung von Datentypen
Spaltenbreiten automatisch verarbeiten
Stil kann über CSS angepasst werden
Unterstützt ausgeblendete Spalten
Benutzerfreundlichkeit
Skalierbarkeit und Flexibilität
International
Dynamische Erstellung von Tabellen
Kostenlos
2. Verwendung
Bei der Erstellung des Backends gibt es keine Künstler oder Frontend-Ingenieure, die mit Ihnen bei der Erstellung der Seite zusammenarbeiten Daten und einen gewissen Sinn für Schönheit haben, können wir das jQuery DataTables-Plug-in verwenden, um die Aufgabe zu erledigen
1 Die Standardkonfiguration von DataTables
$(document).ready(function() { $('#example').dataTable(); } );
2. Einige grundlegende Attributkonfigurationen von DataTables
"bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter": true, //过滤功能 "bSort": false, //排序功能 "bInfo": true,//页脚信息 "bAutoWidth": true//自动宽度
3. Datensortierung
$(document).ready(function() { $('#example').dataTable( { "aaSorting": [ [ 4, "desc" ] ] } ); } );
Sortieren Sie ab Spalte 0 in umgekehrter Reihenfolge mit Spalte 4
4 , Einige Spalten ausblenden
$(document).ready(function() { $('#example').dataTable( { "aoColumnDefs": [ { "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, { "bVisible": false, "aTargets": [ 3 ] } ] } ); } );
5. Internationalisierung
$(document).ready(function() { $('#example').dataTable( { "oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" }, "sZeroRecords": "没有检索到数据", "sProcessing": "<img src='./loading.gif' />" } } ); } );
6. Sortierfunktion:
$(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, { "asSorting": [ "asc" ] }, { "asSorting": [ "desc", "asc", "asc" ] }, { "asSorting": [ ] }, { "asSorting": [ ] } ] } ); } );
7 4 Typen: wie folgt
•DOM-Dokumentdaten
•Javascript-Array js-Array
•Ajax-Quelle Ajax-Anforderungsdaten
•Serverseitige Verarbeitung Serverseitige Daten
Das obige ist der detaillierte Inhalt vonWas sind jQuery-Datentabellen? Wie verwende ich Datentabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!