IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

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:

  • jquery.dataTables.js - DataTables - unminified. This is particularly useful for debugging.
  • jquery.dataTables.min.js - DataTables - minified. Generally speaking this is the Javascript file to use for deployments.
  • jquery.dataTables.css - Base line CSS for DataTables. This file provides basic positioning of DataTables control elements and styling of the table. The class of "dataTable" should be added to any table that you wish to use as a DataTables (this will be done automatically with DataTables 1.9).
  • jquery.dataTables_themeroller.css - Base line CSS for DataTables when used with ThemeRoller. Very similar to jquery.dataTables.css, with a few additions for integrating the table fully with ThemeRoller themes.

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.

Exemples

Origen de dades una taula HTML

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:

<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

Data sources

JSON/Ajax

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:

Plugins

Extres
Editor (CRUD)

Plugin que permet fer operacions crud a la taula

TableTools. Exportar a CSV, Excel, imprimir, PDF

Troubleshooting. Resol·lució de problemes

Ordenar per data

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));
    }
} );
TypeError: k is undefined

En el meu cas la taula no estava ben formada, no tenia els tbody i els theader.

Jquery Mobile

Troubleshooting

Bootstrap i datatables i scroll horizontal no va

É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;

Vegeu també

Vue:

Enllaços externs