DataTables with currencyFormatter.js sort failure.

DataTables with currencyFormatter.js sort failure.

pekabopekabo Posts: 7Questions: 2Answers: 1

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
});

This question has an accepted answers - jump to answer

Answers

  • pekabopekabo Posts: 7Questions: 2Answers: 1
    Answer ✓

    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
    });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Thanks for posting back!

    Allan

  • pekabopekabo Posts: 7Questions: 2Answers: 1

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.