Depèn de Jquery (és l'única dependència) ja que de fet és un plugin de Jquery. Es pot obtenir la última versió a:
http://datatables.net/download/
En el moment d'escriure aquest artícle:
http://datatables.net/releases/DataTables-1.9.4.zip
és un zip amb un munt de fitxers. Els més importants (la resta és documentació) estan a la carpeta media.
També es pot utilitzar directament un CDN sense instal·lar res, per exemple:
<!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Els fitxers importants són:
The other files that are available on the CDN are image files for the CSS and will be included automatically, as required.
Per utilitzar-lo cal declarar l'script javascript de datables i també un css. Un exemple:
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.js"></script> <script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script>
IMPORTANT: Oco no carregueu dos cops la llibreria Jquery i adapteu les URL.
Recursos
Vegeu també webfaltes i Aplicació inventari que utilitzen està eina.
Instal·leu jquery seguint l'apartat:
#Exemple d'us i configuració d'Apache
IMPORTANT: Tambér podeu utilitzar els CDN de datatables. Vegeu JQuery#Origen_de_dades_una_taula_HTML
Instal·leu datatables:
$ sudo mkdir -p /usr/share/javascript/jquery/datatables $ cd /usr/share/javascript/jquery/datatables $ sudo wget http://www.datatables.net/download/build/jquery.dataTables.js
Ara tindreu disponible a la URL:
http://IP_SERVIDOR/javascript/jquery/datatables/jquery.dataTables.js
Per exemple en localhost:
http://185.13.76.62/javascript/jquery/datatables/jquery.dataTables.js
Feu un include:
<head> ... <script src="/javascript/jquery/datatables/jquery.dataTables.js"> ... </head>
El codi Javascript és:
Acacha Wiki<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
On example és el id de la taula HTML com:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center"> 4</td> <td class="center">X</td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> </tr> <tr class="even gradeA"> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> <td class="center">A</td> </tr> ...
La taula ha d'esta ben formada i tenir thead i tbody:
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
Exemple complet:
URL: http://localhost/datatables/
Cal baixar els CSS:
$ cd /var/www/datatables/ $ sudo wget http://www.datatables.net/release-datatables/media/css/demo_table.css $ sudo wget http://www.datatables.net/release-datatables/media/css/demo_page.css
Fitxer:
/var/www/datatables/index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables examples</title>
<style type="text/css" title="currentStyle">
@import "demo_page.css"; @import "header.ccss";
@import "demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="/javascript/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/javascript/jquery/datatables/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</body>
Recursos
NOTA: La clau està en l'objecte aaData que és un array javascript que conté el contingut inicial de la taula!
La forma bàsica d'utilitzar una font de dades que no sigui una taula HTML és utilitzar un Array javascript que està en format JSON:
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "<b>A</b>";
}
return sReturn;
}
}
]
} );
} );
La "versió Ajax" simplement és cridar a una URL que pot ser estàtica (fitxer JSON estàtic) o dinàmica (fitxer JSON generat dinàmicament per llenguatge de Server Scripting com PHP). Exemple:
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../examples_support/json_source.txt'
} );
} );
Un exemple de URL:
http://datatables.net/examples/examples_support/json_source.txt
Recursos:
Plugin que permet fer operacions crud a la taula
Plugin:
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
En el meu cas la taula no estava ben formada, no tenia els tbody i els theader.
És un problema amb la definició del max-width de les taules a bootstrap. Per defecte està definit a:
max-width:100%;
Per que funcioni be datatables la taula ha de tenir:
max-width:none;
Vue: