JQuery datatables: Personalizar las filas de la tabla

Veamos algunas de las formas en que podemos personalizar las filas de nuestro datatable

Cambiar el nombre de la clase de la fila con la configuración

datatable pone un class a los de las filas, alternando "odd" e "even" (<tr class="odd" ... y <tr class="even"... . De esta forma con CSS podemos dar colores distintos a las filas pares e impares, como en la siguiente figura Podemos cambiar el nombre de estas clases. En la configuración de nuestro datatable nos bastará poner

tabla = $('#tabla').dataTable({
   asStripeClasses : ["impar","par","tercero"]
}

Esto hará que los de las filas tengan clase "impar", "par" y "tercero" volviendo a repetir la secuencia a partir de la cuarta fila. Podemos quitar cualquier clase de las filas si dejamos un array vacío []. Hay un detalle importante a tener en cuenta y es que desde datatable 1.9 la variable se llama asStripeClasses, pero en versiones anteriores se llamaba asStripClasses.

Cambiar el nombre de la clase de la fila con los datos

Vimos en JQuery datatables que el datatable podía coger los datos de un fichero en formato json. En ese tutorial usamos el formato de array de array de datos, de esta forma

{ "aaData" : [
   ["a",1,"rojo","I"],
   ["b",2,"verde","II"],
   ["c",3,"azul","III"]
]}

Otra opción que funciona y que nos puede dar un poco más de versatilidad es que los datos se pongan de la siguiente forma

{ "aaData" : [
   {"0":"a", "1":1, "2":"rojo", "3":"I"},
   {"0":"b", "1":2, "2":"amarillo", "3":"II"},
   {"0":"c", "1":3, "2":"azul", "3":"III"}
]}

Es decir, cada fila es un array en el que ponemos explicitamente las claves "0", "1", "2", etc correspondientes a las columnas. Esto y datatable nos permiten añadir una clave especial que contiene el nombre de la clase que queremos para esa fila, o el id que queremos para esa fila

{ "aaData" : [
   {"0":"a","1":1,"2":"rojo","3":"I","DT_RowClass":"unaclase", "DT_RowId":"unid"},
   {"0":"b","1":2,"2":"amarillo","3":"II"},
   {"0":"c","1":3,"2":"azul","3":"III"}
]}

En la primera fila hemos añadido "DT_RowClass" y "DT_RowId" que contendrán respectivamente una clase y un id para nuestro primer de la tabla, dando como resultado ​. Vemos que se añade la clase al "odd" por defecto. Podemos dejarlo así si nos interesa o quitar con la opción asStripeRow los "odd" e "even", como vimos en el punto anterior. Con esta forma, cambiando el class desde los datos, podemos en el lado del servidor echar "cuentas" para poner un class u otro en función del dato concreto en vez de que la fila sea par o impar. Por ejemplo, imagina que la tabla son tareas asignadas a distintos usurios. Podemos poner filas rojas que representen datos con una fecha con mucho retraso, o que sean especialmente importantes, o si pertenecen al usuario que está viendo la página, etc.

Cambiar el nombre de la clase con un callback

Finalmente, otra opción más potente todavía de cambiar la fila es poner un callback. La función fnCreatedRow() será llamada cada vez que una fila se cree, después de que ha sido creada, es decir, cuando el con todos los estén disponibles. La forma de definir este callback es la siguiente

tabla = $('#tabla').dataTable({
   fnCreatedRow : function (nRow, aData, iDataIndex) {
      $(nRow).addClass("otra");
   });

Los parámetros que nos pasarán será el DOM element (nRow, un HTMLTableRowElement), los datos de la fila como un arrray (aData) y el índice de la fila. Con esta información y un poquito de javascript/jQuery, podemos manipular la fila totalmente a nuestro gusto. En el ejemplo, con jQuery, añadimos un class="otra" a la fila, obteniendo ​