Calculate sum of values in jquery datatable footer

Question

I want to display total amount in jquery datatable footer. Here is my datatable:

Here's my jquery datatable code:

for (var i = 0; i < length; i++ ) {
    var patient = data.data[i];
    console.log(patient);

    var formattedDate = function() {
        if (patient.Date === null) return "";
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(patient.Date);
        var dt = new Date(parseFloat(results[1]));
        return (dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear());
    }

    $('#myReportTable').dataTable().fnAddData([
        patient.Name,
        patient.Address,
        //patient.Date,
        formattedDate,
        patient.Description,
        patient.Amount
    ]);
}

$('#myReportTable').DataTable({
footerCallback: function (tfoot, data, start, end, display) {
        var api = this.api();
            $(api.column(4).footer()).html(
            "Total: " + api.column(4).data().reduce(function (a, b) {
                return a + b;
            }, 0)
        );
    }
});

Tried this code, but it is showing an error:

I'm new to this, please help.

Try `var totalAmount = data.data.reduce((acc,cur) => acc + cur);` — holydragon, Jan 11 '19 at 07:27

ThivankaW · Accepted Answer · 2019-01-11T08:35:23.513

1

You can use datatables Sum Api

link - https://datatables.net/plug-ins/api/sum()

Also you could use the drawcallback function along with the sum api to calculate the some each time a record is added.

basically something like this;

$('#myReportTable').DataTable( {
    drawCallback: function () {
      var api = this.api();
      $( api.table().footer() ).html(
        api.column(3).data().sum()
      );
    }
  } );

3rd column indicates your Amount.

edited Jan 11 '19 at 08:35

answered Jan 11 '19 at 07:32

ThivankaW

511
1
8
21

Not working, still it showing the same error(check the error screenshot in a question) – Shreyas Pednekar Jan 11 '19 at 07:34
@ShreyasPednekar your basically initializing your datatable twice. can you provide me the full javascript code . – ThivankaW Jan 11 '19 at 07:35

Jitendra G2 · Answer 2 · 2019-01-11T08:35:46.833

0

You are initializing DataTable() as two time in your code. Just combine that code so it will not throw an error as you mentioned (cannot reinitialize datatable...).

$(document).ready(function () {
        $('#example').DataTable({
            "footerCallback": function (row, data, start, end, display) {
                total = this.api()
                    .column(4)
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);
                alert(total);
            }
        }).fnAddData([
                patient.Name,
                patient.Address,
                //patient.Date,
                formattedDate,
                patient.Description,
                patient.Amount
            ]);
    });

edited Jan 11 '19 at 08:35

answered Jan 11 '19 at 08:09

Jitendra G2

1,196
7
14

Tried it already but how can we calculate total amount before adding data into datatable – Shreyas Pednekar Jan 11 '19 at 08:10
I am not sure what's your purpose, but if you want to display total on table footer, you can use footerCallback as I have used on above code. – Jitendra G2 Jan 11 '19 at 08:12
I know I have to use footerCallback only but it's now working – Shreyas Pednekar Jan 11 '19 at 08:16
@ShreyasPednekar Now all issue resolved? If you want to calculate Sum before bind the value in datatable. You need to calculate sum from array object...https://stackoverflow.com/questions/23247859/better-way-to-sum-a-property-value-in-an-array – Jitendra G2 Jan 11 '19 at 08:24
I know how to calculate amount but it is giving error while binding it to the footer in jquery datatable – Shreyas Pednekar Jan 11 '19 at 08:44

Calculate sum of values in jquery datatable footer

2 Answers2