Escrito por: TiraCodigo
Etiquetas: jQuery, MVC, DataTable
Como pudimos ver en nuestro tutorial anterior Como utilizar jQuery DataTables en un proyecto de ASP MVC , podemos darle vida con DataTables a nuestra simple tabla de HTML, pero una vez que lo implementamos, nos va a saltar la necesidad de personalizarlo, ya que de inicio, viene todo activado y podríamos requerir no tener todas las opciones, o utilizar un idioma diferente al cargado por defecto, a continuación te explicare las personalizaciones mas comunes que le puedes hacer a tu DataTable:
Idioma
El idioma por defecto que tiene DataTables es el ingles, por lo cual si estamos desarrollando un sitio en español, es necesario cambiar el idioma para que nuestro proyecto tenga coherencia, esto lo hacemos agregando el parametro de idioma al inicializar el DataTable en nuestro JS, el parámetro es "language", y en la propiedad "url", metemos la dirección del json con la definición de las traducciones en español, la cual es "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json", nos deberia quedar en el codigo de la siguiente forma:
<script type="text/javascript">
$(document).ready(function () {
$('#MiTabla').dataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
}
});
});
</script>
Orden
DataTables por defecto, ordena por la primera columna de la tabla, pero imaginemos que necesitamos ordenar por una columna diferente, para realizar esto, solo bastará con agregar en la definicion del html del <table> el elemento data-order, donde como primer parametro agregaremos el numero de la columna por la cual queremos ordenar, iniciando la primera con 0, y en el segundo parametro indicamos si el orden es ascendente (asc) o descendente (desc), en nuestro ejemplo quedaria de la siguiente forma:
<table data-order='[[ 1, "asc" ]]' id="MiTabla" style="width:100%">
<thead>
<tr>
<th>Numero</th>
<th>Nombre</th>
<th>Fecha de nacimiento</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Fulanito</td>
<td>@DateTime.Now.AddYears(-20)</td>
</tr>
<tr>
<td>2</td>
<td>Perenganito</td>
<td>@DateTime.Now.AddYears(-25)</td>
</tr>
<tr>
<td>3</td>
<td>Epifanio</td>
<td>@DateTime.Now.AddYears(-30)</td>
</tr>
<tr>
<td>4</td>
<td>Jose</td>
<td>@DateTime.Now.AddYears(-35)</td>
</tr>
<tr>
<td>5</td>
<td>Pedro</td>
<td>@DateTime.Now.AddYears(-40)</td>
</tr>
<tr>
<td>6</td>
<td>Luis</td>
<td>@DateTime.Now.AddYears(-45)</td>
</tr>
</tbody>
</table>
Búsqueda
La búsqueda, busca el dato ingresado en todas las filas de la tabla, de encontrar alguna coincidencia, mostrará solo la fila con el dato encontrado, esta utilidad, de no ser necesaria, podemos indicarle al DataTable que no la muestre, esto con el parámetro searching en false, quedando de la siguiente forma:
<script type="text/javascript">
$(document).ready(function () {
$('#MiTabla').dataTable({
"searching": false,
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
}
});
});
</script>
Paginación
Este ultimo es el mas fácil, como podemos ver en el DataTable, al llegar a determinado numero de filas, los resultados se paginan, para no hacer una pagina muy larga en caso de que se esten mostrando muchos resultados, si esto es lo que queremos, que todos los datos se muestren desde el inicio y no se pagine nada, para esto podemos desactivar la paginación poniendo el parámetro paging en false, lo cual podríamos realizar asi:
<script type="text/javascript">
$(document).ready(function () {
$('#MiTabla').dataTable({
"paging": false,
"searching": false,
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
}
});
});
</script>
A continuación los links para ver el proyecto en producción y el link de descarga