Number format issue in datatables

Question

I'm trying to format number using fnFormatNumber function as below. But it print Uncaught TypeError: undefined is not a function in javascript console.

How can I fix this?

<script>
    $(document)
            .ready(
                    function() {
                        $("#dataTables-expense")
                                .dataTable(
                                        {
                                            "order" : [ [ 1, "desc" ] ],
                                            "aoColumnDefs" : [ {
                                                "bSortable" : false,
                                                "aTargets" : [ 0, 7 ]
                                            } ],
                                            'iDisplayLength' : 10,
                                            "aLengthMenu" : [
                                                    [ 10, 15, 25, 50, 100,
                                                            250, 500, -1 ],
                                                    [ 10, 15, 25, 50, 100,
                                                            250, 500, "All" ] ],
                                                            "fnFormatNumber": function ( iIn ) {
                                                                if ( iIn < 1000 ) {
                                                                  return iIn;
                                                                } else {
                                                                  var
                                                                    s=(iIn+""),
                                                                    a=s.split(""), out="",
                                                                    iLen=s.length;

                                                                  for ( var i=0 ; i<iLen ; i++ ) {
                                                                    if ( i%3 === 0 && i !== 0 ) {
                                                                      out = "'"+out;
                                                                    }
                                                                    out = a[iLen-i-1]+out;
                                                                  }
                                                                }
                                                                return out;
                                                              },                                                                
                                            "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
                                                data = api.column(3).data();
                                                total = data.length ? data
                                                        .reduce(function(a,
                                                                b) {
                                                            return intVal(a)
                                                                    + intVal(b);
                                                        })
                                                        : 0;

                                                // Total over this page
                                                data = api.column(3, {
                                                    page : 'current'
                                                }).data();
                                                pageTotal = data.length ? data
                                                        .reduce(function(a,
                                                                b) {
                                                            return intVal(a)
                                                                    + intVal(b);
                                                        })
                                                        : 0;

                                                // Update footer
                                                $(api.column(3).footer())
                                                        .html(this.fnFormatNumber(pageTotal));
                                            }
                                        });
                    });
</script>

Answer 1

This is due to the fact, that fnFormatNumber is part of the initialization options / settings object, not the datatable object itself, this.

You can access the settings object through the fnSettings() method. Change

$(api.column(3).footer()).html(this.fnFormatNumber(pageTotal));

to

$(api.column(3).footer()).html(this.fnSettings().fnFormatNumber(pageTotal));

demonstrative demo -> http://jsfiddle.net/q2GC3/