Utilizzo e dettagli API del plugin jQuery.datatables.js

1、configurazione predefinita di DataTables

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

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

2、configurazione di base delle proprietà di DataTables

"bPaginate": true, //funzione di paginazione
"bLengthChange": true, //modifica della quantità di dati visualizzati per pagina
"bFilter": true, //funzione di filtraggio
"bSort": false, //funzione di ordinamento
"bInfo": true,//informazioni di pagina di piè di pagina
"bAutoWidth": true//larghezza automatica

Esempio:http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、ordinamento dei dati

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

Dalla colonna 0, in ordine decrescente della colonna 4

Esempio:http://www.guoxk.com/html/DataTables/Sorting-data.html

4、ordinamento multi-colonna

Esempio:http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5、nascondere alcune colonne

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

Esempio:http://www.guoxk.com/html/DataTables/Hidden-columns.html

6、改变页面上元素的位置

$.document.ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<"class" and > – div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>

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

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

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

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

8、显示数字的翻页样式

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

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

9、限制水平宽度

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

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

10、限制垂直高度

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

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

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

12、改变语言

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
“sLengthMenu”: “Mostra _MENU_ record per pagina”,
“sZeroRecords”: “Purtroppo, non trovato”,
“sInfo”: “Da _START_ a _END_ /Totale _TOTAL_ dati”,
“sInfoEmpty”: “Nessun dato”,
“sInfoFiltered”: “(Ricerca tra _MAX_ dati)”,
“oPaginate”: {
“sFirst”: “Prima pagina”,
“sPrevious”: “Pagina precedente”,
“sNext”: “Pagina successiva”,
“sLast”: “Ultima pagina”
}
“sZeroRecords”: “Nessun dato trovato”,
“sProcessing”: “<img src=\'#\'" /loading.gif' />”
}
});
});

Esempio:http://www.guoxk.com/html/DataTables/Change-language-information.html

13、Evento di click

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

14/Utilizzare insieme l'estensione tooltip

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

15、Definire il numero di dati visualizzati per pagina

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

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

16、row callback

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

Se il valore dell'ultima colonna è“A”, viene visualizzato in grassetto

17、Controllo dell'ordinamento

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

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

Descrizione: La prima colonna cliccata viene ordinata per impostazione predefinita, la seconda colonna cliccata viene ordinata in modo sequenziale, la terza colonna cliccata una volta viene ordinata in senso inverso, due volte in senso sequenziale, le colonne da第四次 a quinta non implementano l'ordinamento

18、Leggi il pacchetto linguistico dal file di configurazione

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

19、Utilizza il sorgente ajax

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

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

20、Rendi i dati pronti sul server utilizzando ajax

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true
"bServerSide": true
"sPaginationType": "full_numbers"
"sAjaxSource": "./server_processing.php"
/*Aggiungi il seguente contenuto per utilizzare il metodo POST per trasmettere i dati
"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'] riceverà i dati trasmessi da aoColumns
});
});

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

21、Carica id e class per ogni riga

Formato dei dati restituiti dal server:

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

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

22, Visualizzare i dettagli per ogni riga, fare clic sul "+" all'inizio della riga per espandere la visualizzazione dei dettagli

Esempio:http://www.guoxk.com/html/DataTables/with-row-information.html

23, Selezionare più righe

Esempio:http://www.guoxk.com/html/DataTables/selectRows.html

22, Integrazione dell'estensione jQuery plugin jEditable

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

Ulteriori riferimenti:

Attenzione: l'oggetto table che deve essere elaborato da dataTable deve avere thead e tbody, e la struttura deve essere regolare (i dati non devono essere completi), in modo che possa essere elaborato correttamente.

Ecco i parametri che possono essere aggiunti durante il binding di dataTable:

Il seguente è il dettaglio dell'uso dell'estensione jQuery.datatables.js e l'esempio di API fornito dall'autore, spero che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'autore risponderà prontamente. In questo senso, ringrazio anche tutti i sostenitori del sito tutorial di urla!

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.