Cómo integrar DataTables con proyectos realizados en Django
DataTables es un plugin de Javascript que facilita muchísimo el tiempo de desarrollo ya que viene con muchas funcionalidades incluídas, como por ejemplo:
- Filtros de datos
- Filtros por rangos
- Filtros por strings
- Paginación automática
- Reordenación por campo automática
Básicamente no tienes que hacer nada para disponer de todas estas funcionalidades, el plugin lo implementa todo al inicializarlo, dependiendo de algunas cosas, si que hay que establecer ciertos parámetros.
El procedimiento es el siguiente:
Agrega este link en tu plantilla para una tabla básica:
En el head
En mi caso como he utilizado algunas funcionalidades extras tuve que agregar también:
<link rel="stylesheet" type="text/css" href="{% static 'socios/Buttons-1.6.5/css/buttons.dataTables.min.css' %}">
<link rel="https://cdn.datatables.net/colreorder/1.5.3/css/colReorder.dataTables.min.css">
Luego al final del body he agregado:
<script type="text/javascript" src="{% static 'socios/JSZip-2.5.0/jszip.min.js' %}"></script>
<script type="text/javascript" charset="utf8" src="{% static 'socios/DataTables-1.10.23/js/jquery.dataTables.min.js' %}"></script>
<script type="text/javascript" src="{% static 'socios/Buttons-1.6.5/js/dataTables.buttons.min.js' %}"></script>
<script type="text/javascript" src="{% static 'socios/Buttons-1.6.5/js/buttons.flash.min.js' %}"></script>
<script type="text/javascript" src="{% static 'socios/Buttons-1.6.5/js/buttons.html5.min.js' %}"></script>
<script type="text/javascript" src="{% static 'socios/Buttons-1.6.5/js/buttons.colVis.min.js' %}"></script>
<script type="text/javascript" src="{% static 'socios/ColReorder-1.5.3/js/dataTables.colReorder.min.js' %}"></script>
Si creas una tabla básica sólo debes agregar:
<
script
type
=
"text/javascript"
charset
=
"utf8"
src
=
"https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"
></
script
>
1.- En la plantilla he configurado un condicional dentro del cual he incluído todo el código:
{% if socios %}{% endif %}
Donde socios es la variable que contiene los datos que vienen de la vista. Dentro de este "if" hay dos partes:
2.- El script que inicializa la tabla:
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#listadosocios').DataTable({
"paging": false,
"columnDefs": [
{ "width": "1%", "targets": 0 },
],
dom: 'Bfrtip',
colReorder: true,
buttons: [
'colvis'
]},);
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[2] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
var table = $('#listadosocios').DataTable();
$('#min, #max').keyup( function() {
table.draw();
} );
} );
</script>
La opción
buttons: ['colvis']},);
Pemite mostrar un botón que oculta/muestra la columna seleccionada.
Con "colReorder: true"
Se activa el botón de reordenación de cada columna.
Y luego el código de la tabla:
<h1 class="text-center">Listado de Socios</h1>
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>Edad mínima:</td>
<td><input type="text" id="min" name="min"></td>
<td>Edad Máxima:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
</table>
<table id="listadosocios" class="display" style="width:100%">
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Edad</th>
<th>Estado</th>
<th>Direccion</th>
<th>Fecha de Pago</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{% for socio in socios %}
<tr>
<td>{{socio.nombre}}</td>
<td>{{socio.apellidos}}</td>
<td>{{socio.edad}}</td>
{% if socio.estatus == "AL" %}
<td class="text-center">Alta</td>
{% else %}
<td class="text-center">Baja</td>
{% endif %}
<td>{{socio.direccion}}</td>
<td>{{socio.fecha_de_pago}}</td>
<td><a href='{% url 'detalle-socio' socio.id %}'>Ver</a> | <a href='{% url 'actualiza-socio' socio.id%}'>Modificar</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<h2 class="text-center">No hay socios en la lista</H2>
Con el condicional "for" imprimo el array de usuarios que viene de la vista en cada una de las celdas, si no hubiera usuarios el condicional "else" mostraría que no existen usuarios.
He de mencionar que el plugin detecta los datos automáticamente, por eso no ves que haya agregado ninguna variable en el código del plugin.
Esto es lo que verías en mi aplicación:
Si tienes cualquier duda deja tu comentario.