DataTables with currencyFormatter.js sort failure.

pekabo

Hi @ all,

With following script I get a DataTables with a sum footer. I format all floats with currencyFormatter.js Combined with HTML-Tag class .monney. This works great. When I click a table headerlink to sort the table. All floats chance to -NaN €.
Has anybody a clou why this is happen and how to solve this.

$(document).ready(function() {

    $.get('stock.csv', function(data) {
        // start the table 
        var html = '<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">';

        // split into lines
        var rows = data.split("\n");

        // parse lines
        j = 0;
        rows.forEach(function getvalues(ourrow) {
                if (j == 0) {
                    // start a table row
                    html += "<thead><tr>";
                    htmltfoot = "<tfoot><tr>";

                    // split line into columns
                    var columns = ourrow.split(";");

                    var arrayLength = columns.length;
                    for (var i = 0; i < arrayLength; i++) {
                        html += "<th><div>" + columns[i] + "</div></th>";                        
                        if (i == 0){
                                htmltfoot += "<th class=\"sum\">Total:</th>";
                            } else {
                                htmltfoot += "<th class=\"sum money\">Total:</th>";
                            }
                    }
                    // close row
                    html += "</tr></thead>";
                    htmltfoot += "</tr></tfoot></tbody>";
                    html += htmltfoot;
                    j++;
                } else {
                    // start a table row
                    html += "<tr>";

                    // split line into columns
                    var columns = ourrow.split(";");

                    var arrayLength = columns.length;
                    for (var i = 0; i < arrayLength; i++) {
                        if (i == 0) {
                            html += "<th>" + columns[i] + "</th>";
                        } else {                            
                            if (columns[i] == 0){
                                html += "<td>" + columns[i] + "</td>";
                            } else {
                                html += "<td class='money'>" + columns[i] + "</td>";
                            }
                        }
                    }
                    // close row
                    html += "</tr>";
                }
            })
            // close table
        html += "</tbody></table>";

        // insert into div
        $('#container').append(html);
        $('#example').DataTable({
            "paging": false,
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api();
                nb_cols = api.columns().nodes().length;
                var j = 1;
                while (j < nb_cols) {
                    var pageTotal = api.column(j, { page: 'current'}).data().reduce(function(a, b) {
                            if (b > 0) {
                            sumAB = Number(a) + Number(b);
                            return sumAB.toFixed(2)
                            }
                            else{return Number(a).toFixed(2);}                          
                        }, 0);
                    // Update footer
                    $(api.column(j).footer()).html(pageTotal);
                    j++;                    
                }
                OSREC.CurrencyFormatter.formatAll(
                {
                    selector: '.money',
                    currency: 'EUR'
                });
            }
        });
    });
    // Code here end
});

pekabo

I solved it, only the footer didn´t format as currency after sorting.
Enclosed the changed script.

$(document).ready(function() {

    $.get('stock.csv', function(data) {
        // start the table 
        var html = '<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">';

        // split into lines
        var rows = data.split("\n");

        // parse lines
        j = 0;
        rows.forEach(function getvalues(ourrow) {
                if (j == 0) {
                    // start a table row
                    html += "<thead><tr>";
                    htmltfoot = "<tfoot><tr>";

                    // split line into columns
                    var columns = ourrow.split(";");

                    var arrayLength = columns.length;
                    for (var i = 0; i < arrayLength; i++) {
                        html += "<th><div>" + columns[i] + "</div></th>";                        
                        if (i == 0){
                                htmltfoot += "<th class=\"sum\">Total:</th>";
                            } else {
                                htmltfoot += "<th class=\"sum money\">Total:</th>";
                            }
                    }
                    // close row
                    html += "</tr></thead>";
                    htmltfoot += "</tr></tfoot></tbody>";
                    html += htmltfoot;
                    j++;
                } else {
                    // start a table row
                    html += "<tr>";

                    // split line into columns
                    var columns = ourrow.split(";");

                    var arrayLength = columns.length;
                    for (var i = 0; i < arrayLength; i++) {
                        if (i == 0) {
                            html += "<th>" + columns[i] + "</th>";
                        } else {                            
                            if (columns[i] == 0){
                                html += "<td>" + columns[i] + "</td>";
                            } else {
                                html += "<td class='money'>" + columns[i] + "</td>";
                            }
                        }
                    }
                    // close row
                    html += "</tr>";
                }
            })
            // close table
        html += "</tbody></table>";

        // insert into div
        $('#container').append(html);
        $('#example').DataTable({
            "paging": false,
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api();
                nb_cols = api.columns().nodes().length;
                var j = 1;
                while (j < nb_cols) {
                    var pageTotal = api.column(j, { page: 'current'}).data().reduce(function(a, b) {
                            if (b > 0) {
                            sumAB = Number(a) + Number(b);
                            return sumAB.toFixed(2)
                            }
                            else{return Number(a).toFixed(2);}                          
                        }, 0);
                    // Update footer
                    $(api.column(j).footer()).html(pageTotal);
                    j++;                    
                }               
            }           
        });
        OSREC.CurrencyFormatter.formatAll(
                {
                    selector: '.money',
                    currency: 'EUR'
                });
    });
    // Code here end
});

allan

Thanks for posting back!

Allan

pekabo

@Allan, think this is fair use.

I have still the problem that the footer didn´t format as currency after sorting.
anybody a idea how to solve it?

allan

It sounds like DataTables isn't seeing it as a number or perhaps the currency format doesn't match what DataTables is looking for. Can you l ink to the page so I can take a look please?

Allan