Verwendung und API-Beispiel von jQuery.datatables.js - detaillierte Erklärung

1、Standardkonfiguration von DataTables

$.document.ready(function() {
$('#example').dataTable();
});

Beispiel:http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、Basis-Eigenschaftenkonfigurationen von DataTables

"bPaginate": true, //Seitenumschaltungsfunktion
"bLengthChange": true, //Änderung der Anzahl der angezeigten Daten pro Seite
"bFilter": true, //Filterfunktion
"bSort": false, //Sortierfunktion
"bInfo": true,//Fußzeileninformation
"bAutoWidth": true//Automatische Breite

Beispiel:http://www.guoxk.com/html/DataTables/Funktion-enablement.html

3、Daten sortieren

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

Ab der 0. Spalte, mit der4Spalten in umgekehrter Reihenfolge anordnen

Beispiel:http://www.guoxk.com/html/DataTables/Sortierung-data.html

4、Sortierung mehrerer Spalten

Beispiel:http://www.guoxk.com/html/DataTables/Multi-Spalte-sorting.html

5、Verstecken einiger Spalten

$.document.ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
});

Beispiel:http://www.guoxk.com/html/DataTables/Versteckt-columns.html

6、Änderung der Position der Elemente auf der Seite

$.document.ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- Anzahl der angezeigten Einträge pro Seite
//f – Filter-Eingabe
//t – Tabelle
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<"class" and > – div with a class
//Examples: <"wrapper"flipt>, <lf<tip>

Beispiel:http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

$.document.ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

Beispiel:http://www.guoxk.com/html/DataTables/State-saving.html

8、显示数字的翻页样式

$.document.ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

Beispiel:http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平限制宽度

$.document.ready(function() {
$('#example').dataTable({
"sScrollX": ""100%
"sScrollXInner": ""110%
"bScrollCollapse": true
});
});

Beispiel:http://www.guoxk.com/html/DataTables/Horizontal.html

10、垂直限制高度

Beispiel:http://www.guoxk.com/html/DataTables/Vertical.html

11、水平和垂直两个方向共同限制

Beispiel:http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、改变语言

$.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' /">
}
});
});

Beispiel:http://www.guoxk.com/html/DataTables/Change-language-row

13、click事件

Beispiel:http://www.guoxk.com/html/DataTables/event-click.html

14/配合使用tooltip插件

Beispiel:http://www.guoxk.com/html/DataTables/tooltip.html

15、定义每页显示数据数量

$.document.ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

Beispiel:http://www.guoxk.com/html/DataTables/length_menu.html

16Row callback

Beispiel:http://www.guoxk.com/html/DataTables/RowCallback.html

The value of the last column is bold if it is "A"

17Sorting control

$.document.ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
{"asSorting": ["asc"]},
{"asSorting": ["desc", "asc", "asc"]},
{"asSorting": []},
{"asSorting": []}
]
});
});

Beispiel:http://www.guoxk.com/html/DataTables/sort.html

Note: The first column is sorted by default when clicked, the second column is sorted when clicked, the third column is reversed when clicked once, and sorted twice, the fourth and fifth columns do not implement sorting when clicked

18Read language package from configuration file

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19Use AJAX source

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "."/arrays.txt'
});
});

Beispiel:http://www.guoxk.com/html/DataTables/ajax.html

20. Use AJAX to organize data on the server side

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "."/server_processing.php",
/*If the following content is added, data is passed using the POST method
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}*/
"oLanguage": {
"sUrl": "cn.txt"
}
"aoColumns": [
{"sName": "platform" },
{"sName": "version" },
{"sName": "engine" },
{"sName": "browser" },
{"sName": "grade" }
]//$_GET['sColumns'] will receive the data passed by aoColumns
});
});

Beispiel:http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21load id and class for each line

Server-side data format returned:

{"}}
"DT_RowId": "row_"8":,
"DT_RowClass": "gradeA"
"0": "Gecko"
"1": "Firefox" 1.5":,
"2": "Win" 98+ / OSX.2+",
"3": ""1.8":,
"4": "A"
}

Beispiel:http://www.guoxk.com/html/DataTables/add_id_class.html

22、Details für jede Zeile anzeigen, klicken Sie auf den "+" am Anfang der Zeile klicken

Beispiel:http://www.guoxk.com/html/DataTables/Details anzeigen, indem Sie auf die Schaltfläche "-mit-row

23、information.html

Beispiel:http://www.guoxk.com/html/DataTables/、Mehrfachzeilen auswählen

22、Integration des jQuery Plugins jEditable

Beispiel:http://www.guoxk.com/html/DataTables/jEditable-integration.html

Weitere Referenzen:

Zu beachten ist, dass das von dataTable zu verarbeitende Table-Objekt sowohl thead als auch tbody haben muss und die Struktur ordentlich sein muss (die Daten müssen nicht vollständig sein), um korrekt verarbeitet zu werden.

Hier sind einige zusätzliche Parameter, die beim Binden von dataTable hinzugefügt werden können:

Erklärung: Hier stellt der Redakteur den Gebrauch des jQuery.datatables.js Plugins und die API-Beispielauflösung vor. Wir hoffen, dass dies für Sie hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar, der Redakteur wird sich umgehend um eine Antwort kümmern. Wir danken auch sehr für die Unterstützung der Website Anleitungshüller!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sollten Sie verdächtige Inhalte entdecken, freuen wir uns über eine E-Mail an notice#w und die Bereitstellung von relevanten Beweisen. Bei nachgewiesener Urheberrechtsverletzung wird dieser Inhalt sofort entfernt.3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sollten Sie verdächtige Inhalte entdecken, freuen wir uns über eine E-Mail an notice#w und die Bereitstellung von relevanten Beweisen. Bei nachgewiesener Urheberrechtsverletzung wird dieser Inhalt sofort entfernt.