Was sind jQuery-Datentabellen? Wie verwende ich Datentabellen?

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=&#39;./loading.gif&#39; />" 
} 
} ); 
} );

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!