Portada » DataTables » Sumar en Datatables resultados (Total de columna)

Sumar en Datatables resultados (Total de columna)

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.

 

Suma en DatatablesCó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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad