Datatables y jQuery: Datatable desde un array javascript

Ya vimos como crear DataTables desde una tabla html. Ahora vamos a ver el mismo ejemplo pero leyendo los datos desde un array javascript.

Para el ejemplo necesitaremos los mismos archivos (css, js, etc) que en el post anterior, y únicamente vamos a modificar el código html y javascript de la página que mostrará el datatable.

Ejemplo de DataTables desde un array javascript

El código necesario es el siguiente:

<script type="text/javascript" charset="utf&minus;8">
$(document).ready(function() {
// el array javascript
var datos =
[
[ "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" ]
];
// creamos el datatable
$('#example').dataTable({
"oLanguage": {
"sUrl": "media/js/datatable.spanish.txt"
},
"aaData": datos,
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
]
});
});

La tabla etiquetada con id=”example” será la usada para crear el datatable.

Añadimos el siguiente código para esta tabla donde queramos que se muestre:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"></table>

Asimismo, incluimos el fichero de idiomas, al igual que en el ejemplo anterior, “media/js/datatable.spanish.txt” para la traducción.

Para que el plugin genere datatables con el array javascript hemos incluido “aaData”: datos, en los valores de creación del datatable.

En cuanto a los nombres de las columnas, los incluimos con el siguiente código:

"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
]

Con la etiqueta aoColumns incluimos un array json con tantos elementos como columnas tenga nuestra tabla. Cada elemento incluirá al menos la etiqueta y el valor para el nombre de la columna ( “sTitle”: ”Engine” ). En las columnas de Version y Grade hemos añadido otra tupla ( sClass : “center” ), que se encargará de añadir la clase “center” para el centrado de el texto.

Descarga los archivos de este ejemplo.

Datatables y jQuery: Datatable desde un array javascript publicado en BajoLinux.