español - ¿Cómo mostrar el total de una columna en la última fila de una tabla de datos generada usando jQuery?

datatables jquery ejemplos

Question

He creado una tabla de datos usando jQuery. La tabla tiene cinco columnas, entre una columna está el monto del pago. Tengo que mostrar la suma de todos los valores en la columna de pago en la parte inferior de la columna de importe de pago. ¿Cómo puedo hacer eso?

A continuación está mi código HTML:

<table id="statement-table" cellpadding="0" cellspacing="0" border="0" class="wide100">
<thead>
<tr>
<th class="black white-active-bg pad-bottom-0-5 cursor-auto">
<input type="checkbox" id="select-all-statement" value="" />
</th>
<th id="stmt-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Statement</th>
<th id="dueDate-column"class="black white-active-bg pad-bottom-0-5 cursor-auto">Due Date</th>
<th id="totalDue-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Total Due</th>
<th id="payment-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Payment Amount</th>
</tr>
</thead>
</table>

A continuación está mi código jquery:

 $(''#statement-table'').dataTable({
"data": json,
"dom": ''t'',
"info": false,
"pageLength": 8,
"columns": [
{"data":""},
{"data": "statementCode"},
{"data": "dueDate"},
{"data": "statementBalance"},
{"data": "statementBalance"}
],
"columnDefs": [
{className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4]},
{
''targets'': 0,
''orderable'': false,
''render'': function(data, type, full, meta) {
++index;
return ''<input type="checkbox" id="select-checkbox''+index+''" name="payment-checkbox" class="multi-checkbox"/><label for="select-checkbox"></label>'';
}
},
{
''targets'': 1,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html(''<span id="pdf" class="stmt-identifier">''+sData+''</span>'');
}
},
{
''targets'': 2,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text(date);
}
},
{
''targets'': 3,
''render'': function (data, type, full, meta){
return ''$''+ data;
}
},
{
''targets'': 4,
''searchable'':false,
''orderable'':false,
''render'': function (data, type, full, meta){
return ''<span class="dollar-font">$</span>''+
''<input type="number" id="payement-textbox''+index+''" name="payment-textbox" min="0" max="100000" step="any" maxlength="9" class="payment" placeholder="--" value=""/>'';
}
}
],
"aaSorting": [[2, ''desc'']],
}); //End of datatable function 

Entonces, necesito imprimir la suma de todos los valores de "columna de pago" en la parte inferior de la "columna de pago". Algo como esto:

¿Por favor ayuda?

Answer 1

Consulte el ejemplo de devolución de llamada de Footer sobre cómo sumar datos en todas las páginas.

Por ejemplo, para calcular el total para la tercera columna (el índice de columnas basado en cero es 2 ):

$(''#example'').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === ''string'' ?
i.replace(/[/$,]/g, '''')*1 :
typeof i === ''number'' ?
i : 0;
};
// Total over all pages
total = api
.column( 2 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 2 ).footer() ).html(''$'' + total);
}
} );