Sumar en Datatables resultados. DataTables nos brinda funciones de devolución de llamada para configurar datos HTML de encabezado y pie de página respectivamente y agregar valor a la presentación. Usando estas funciones de devolución de llamada, podemos modificar la tabla resultados dinámicos en sumatoria, etc.
Sumar en Datatables resultados (Total de columna)
Podemos agregar información personalizada en la parte del encabezado y pie de página de las tablas de resultados de base de datos. Por ejemplo, podemos agregar información de encabezado específica de columna, mostrar la suma total de una columna y más opciones.
Sumar DataTables usando devolución de llamada de pie de página
Aquí presentaré un código de ejemplo para calcular el total de una columna y mostrarlo usando las funciones de devolución de llamada del pie de página de DataTables.
Además, estas funciones de devolución de llamada para modificar el encabezado y el pie de página son headerCallback y footerCallback, en el cual usaremos para sumar las columnas.
En un tutorial anterior, vimos cómo habilitar el procesamiento del lado del servidor en Datatables. Échele un vistazo para obtener información sobre el procesamiento del lado del servidor de DataTables.
La siguiente captura de pantalla muestra la lista de resultados de la base de datos al habilitar el procesamiento del lado del servidor. Muestra el total de la columna calculado mediante el script de devolución de llamada de pie de página de DataTables.
Código HTML para DataTables con Columna Total
El siguiente script muestra el HTML de la tabla inicializado con la biblioteca DataTables para mostrar los resultados de la base de datos.
Establecemos la opción serverSide como válida para obtener el resultado de la base de datos mediante una llamada AJAX. Este código contiene etiquetas de pie de página de tabla con etiquetas de contenedor vacías.
Después de ejecutar las funciones de devolución de llamada de pie de página, estos contenedores se llenarán con la suma de los datos de la columna.
<!DOCTYPE html>
<html>
<head>
<title>Calcular Suma (Total) de DataTables en Columna</title>
<link rel="stylesheet" href="vendor/datatables.min.css">
<link rel="stylesheet" href="vendor/style.css">
<script src="vendor/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="vendor/datatables.min.js" type="text/javascript"></script>
</head>
<body>
<table id="tbl-attendance" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Curso</th>
<th>Lunes</th>
<th>Martes</th>
<th>Miercoles</th>
<th>Jueves</th>
<th>Viernes</th>
</tr>
</thead>
<tfoot align="right">
<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
</tfoot>
</table>
</body>Pie de página: Callback Script
El siguiente script se usa para inicializar la biblioteca DataTables con la referencia del selector de id de la tabla HTML. Contiene una función de devolución de llamada de pie de página para calcular la suma de los datos de la columna. Esta función calcula la suma o el total por columna.
Esta función obtiene el valor usando column(index).data() y lo convierte a un formato de número entero para calcular el total. Después de calcular el total de la columna, utiliza column(index).html() para incluir el total en el pie de página de forma dinámica.
<script>
$(document).ready(function() {
$('#tbl-attendance').dataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// converting to interger to find total
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// computing column Total the complete result
var monTotal = api
.column( 1 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
var tueTotal = api
.column( 2 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
var wedTotal = api
.column( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
var thuTotal = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
var friTotal = api
.column( 5 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer by showing the total with the reference of the column index
$( api.column( 0 ).footer() ).html('Total');
$( api.column( 1 ).footer() ).html(monTotal);
$( api.column( 2 ).footer() ).html(tueTotal);
$( api.column( 3 ).footer() ).html(wedTotal);
$( api.column( 4 ).footer() ).html(thuTotal);
$( api.column( 5 ).footer() ).html(friTotal);
},
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"processing": true,
"serverSide": true,
"ajax": "server.php"
} );
} );
</script>Conexión a MySQL y consultas SQL Datatables
El fichero server.php será el encargado de la conexión con el servidor de base de datos y además de realizar las consultas SQL para poblar nuestro Datatables. Mas que nada se usa para la opción serverSide Datatables.
<?php
// DB nombre de tabla a usar
$table = 'tbl_attendance';
// Llave primaria en Tabla
$primaryKey = 'id';
// Matriz de columnas de la base de datos que deben leerse y enviarse a DataTables.
// El parámetro `db` representa el nombre de la columna en la base de datos, mientras que `dt`
// el parámetro representa el identificador de la columna DataTables. En este caso sencillo
// índices
$columns = array(
array( 'db' => 'subject', 'dt' => 0 ),
array( 'db' => 'monday', 'dt' => 1 ),
array( 'db' => 'tuesday', 'dt' => 2 ),
array( 'db' => 'wednesday', 'dt' => 3 ),
array( 'db' => 'thursday', 'dt'=> 4),
array( 'db' => 'friday', 'dt' => 5 )
);
// SQL server datos de conexion
$sql_details = array(
'user' => 'root',
'pass' => '',
'db' => 'suma',
'host' => 'localhost'
);
/* * * * * * * * * * * * * * * * * * * *
* Si solo desea usar la configuración básica para DataTables con PHP
* del lado del servidor, no hay necesidad de editar debajo de esta línea.
*/
require( 'vendor/datatables/ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);Recomendaciones
Existen otras formas de sumar columnas en Datatables, pero esta es más eficaz y simple para su integración en la generación de la tabla dinámica.
En este articulo hemos sumado todas las columnas, también se puede implementar para una sola columna.
Espero que este ejemplo les ayude en sus proyectos web.
