Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind jQuery-Datentabellen? Wie verwende ich Datentabellen?

伊谢尔伦
Freigeben: 2017-07-22 09:15:05
Original
1793 Leute haben es durchsucht

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(); 
} );
Nach dem Login kopieren

2. Einige grundlegende Attributkonfigurationen von DataTables


 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度
Nach dem Login kopieren

3. Datensortierung


$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );
Nach dem Login kopieren

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 ] } 
] } ); 
} );
Nach dem Login kopieren

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; />" 
} 
} ); 
} );
Nach dem Login kopieren

6. Sortierfunktion:


$(document).ready(function() { 
$(&#39;#example&#39;).dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage