Total footer callback live change.
Total footer callback live change.
Hi,
I have to begin to say that I have used datable for a big project now around a year and it works great. But I have still a lot to learn :-)
I have tried to solve so I can se a change in the total footerCallback. https://datatables.net/examples/advanced_init/footer_callback.html
As on this link you can see that we can change the page: 'current. But I havet find away for it.
By the way I am getting NaN when I have values over 9 000 000
Here is my code.
`function ShowTableData(url, Table_ID, columnsUrl, placeholderId, tableTitle,searchValue) {
var closeClass = $("." + Table_ID).closest(".card-box").removeClass('hide');
var columnAlignment = '';
var footerColumn = '';
$("." + Table_ID).html(tableTitle);
$.get(columnsUrl, function (data, status) {
if (data.trim() != '' && data.trim() != null) {
var jsonData = JSON.parse(data);
columnAlignment = jsonData.columnAlignment;
footerColumn = jsonData.footerColumn;
$.each(jsonData.columnTitle, function (i, title) {
var titleValue = title.trim() +'/'+jsonData.columnDb[i].trim();
$("#" + Table_ID + " thead tr").append("<th>" + title + "</th>");
});
$.each(jsonData.columnTitle, function (i, title) {
$("#" + Table_ID + " tfoot tr").append("<th></th>");
});
/*$.each(jsonData.columnTitle, function (i, title) {
$("#" + Table_ID + " thead tr").append("<th>" + title + "</th>");
$("#" + Table_ID + " tfoot tr").append("<th>" + title + "</th>");
});*/
}
setTimeout(function () {
$("#" + Table_ID + " thead tr").clone(true).appendTo( "#" + Table_ID + " thead" );
$("#" + Table_ID + " thead tr:eq(1) th").each( function (i) {
var title = $(this).text().split('/');
if (title[0].toLowerCase() != 'action' && title[0].toLowerCase() != 'actions') {
if (searchValue.trim() != '' && searchValue.trim() != null) {
var searchValueJson = JSON.parse(searchValue);
var inpputValue = '';
$.each(searchValueJson, function (key, value) {
if(key == title[1]) {
inpputValue = 'value="'+value +'"';
}
});
}
$(this).html('<input type="text" '+inpputValue+' class="form-control form-control-sm search_by" data-placeholderId="' + placeholderId + '" data-columnName="' + title[1] + '" placeholder="Sök ' + title[0] + '" />');
} else {
$(this).html('');
}
$( 'input', this ).on( 'keyup change', function () {
if ( DataTable.column(i).search() !== this.value ) {
DataTable
.column(i)
.search( this.value )
.draw();
}
});
} );
var DataTable = $("#" + Table_ID).DataTable({
"ajax": url,
dom:
"<'row'<'col-sm-12 table-controls'fBl>>" + "<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-12'p>>",
buttons: [
{extend: "copy", className: "buttonsToHide"},
{extend: "csv", className: "buttonsToHide"},
{extend: "excel", className: "buttonsToHide"},
{extend: "pdf", className: "buttonsToHide"}
],
"search": {
"regex": true
},
columnDefs: [
{ targets: columnAlignment, className: 'td-right'},
{ targets: '_all', className: 'td-left' }
],
"ordering": false,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();
nb_cols = api.columns().nodes().length;
//console.info(nb_cols);
//var j = 3;
$.each(footerColumn, function( index, value ) {
var intVal = function (index) {
return typeof index === 'string' ?
index.replace(' ',',').replace(/[\$,₹]/g, '') * 1 :
typeof index === 'number' ?
index : 0;
};
console.info(value.thousand_sep);
if(value.footer_visible != '' && value.footer_visible == 1) {
var thousanSep = value.thousand_sep;
var decimalValue = value.decimal;
var pageTotal = api
.column( index, { page: 'current'} )
.data()
.reduce( function (a, b) {
var resultValue = intVal(a) + intVal(b);
return resultValue.toFixed(decimalValue).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1'+thousanSep);
//return $.fn.dataTable.render.number('.', '.', 2, '').display( resultValue );
//return parseFloat(floatVal(a)) + parseFloat(floatVal(b));
/*var $th = $(tfoot).find('th').eq(1);
$.fn.dataTable.render.number('.', ',', 0, '$').display( resultValue );*/
}, 0 );
$( api.column( index ).footer() ).html(pageTotal);
}
//console.info( index + ": " + value );
});
//while(j < nb_cols){
//j++;
//}
//console.info(pageTotal);
}`
Answers
Hi I was able to solve it after 8h trying :-) I founded a code that I could use :-)
var sum = display.map(c => data[cl][index]).reduce((a, b) => intVal(a) + intVal(b), 0 );
$( api.column( index ).footer() ).html();
But mi other problem is when I have example 1 251 116.50 I get Nan
but under 1 000 000.00 then it works fine. I am susbecting that I am missing some thing here index.replace(' ',',').replace(/[\$,₹]/g, '') * 1 : ?
I have solved this. How can I mark it as solved