Total footer callback live change.

Total footer callback live change.

samsamtestsamsamtest Posts: 52Questions: 15Answers: 1
edited March 2019 in Free community support

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

  • samsamtestsamsamtest Posts: 52Questions: 15Answers: 1
    edited March 2019

    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 : ?

  • samsamtestsamsamtest Posts: 52Questions: 15Answers: 1

    I have solved this. How can I mark it as solved

This discussion has been closed.