Have DataTables Show Total In Footer AND Default Sort of 50 Records

jo15765

I am trying to use this syntax which I plan to use to default display of 50 and have CSV, Excel, Print display, and display totals at the bottom of the columns. The syntax displays all records on one page, albeit displaying the totals at the bottom.

This is the syntax

           $(document).ready(function () {
                $('#example').DataTable({
                    dom: 'B<"clear">lfrtip',
                    buttons: ['csv', 'excel', 'print'],
                    "iDisplayLength": 50,
                    footerCallback: function (row, data, start, end, display) {
                        var api = this.api(),
                                data;
                        var intVal = function (i) {
                            return typeof i === 'string' ?
                                    i.replace(/[\$,]/g, '') * 1 :
                                    typeof i === 'number' ?
                                    i : 0;
                        };
                        var totalColumn = function (colNum) {
                            // Total over all pages
                            total = api
                                   .column(colNum)
                                    .data()
                                    .reduce(function (a, b) {
                                        return intVal(a) + intVal(b);
                                  }, 0);
                            pageTotal = api
                                    .column(colNum, {
                                        page: 'current'
                                    })
                                    .data()
                                    .reduce(function (a, b) {
                                        return intVal(a) + intVal(b);
                                    }, 0);
                            $(api.column(colNum).footer()).html(
                                    '$' + pageTotal + ' ( $' + total + ' total)'
                                    );
                        }
                        totalColumn(2);
                        totalColumn(3);
                        totalColumn(4);
                        totalColumn(5);
                        totalColumn(6);
                        totalColumn(7);
                        totalColumn(8);
                        totalColumn(9);
                    }
                });
            });

And this is the error thrown in my developer console
Uncaught TypeError: Cannot read property 'sDefaultContent' of undefined
at B (datatables.min.js:sourcemap:92)
at t.Xb (datatables.min.js:sourcemap:196)
at t.iterator (datatables.min.js:sourcemap:175)
at t.<anonymous> (datatables.min.js:sourcemap:199)
at t.<anonymous> (datatables.min.js:sourcemap:179)
at t.data (datatables.min.js:sourcemap:178)
at totalColumn (ar-detail-summary:468)
at n.fn.init.footerCallback (ar-detail-summary:496)
at datatables.min.js:sourcemap:150
at Function.map (datatables.min.js:sourcemap:14)

How do I need to re-write my syntax so that no error is thrown and I can have everything display as I need?

DimitrisS

I have same problem, did u have any luck with this?

colin

Hi @DimitrisS ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin