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.

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.

• javascript
• jquery
• ajax
• datatables

Share Improve this question Follow edited Jan 11, 2019 at 7:32 Shreyas Pednekar asked Jan 11, 2019 at 7:11 Shreyas PednekarShreyas Pednekar 1,30588 gold badges3333 silver badges5454 bronze badges 3

• Please provide example data. – O.O Commented Jan 11, 2019 at 7:27
• Try var totalAmount = data.data.reduce((acc,cur) => acc + cur); – holydragon Commented Jan 11, 2019 at 7:27
• @OlayinkaO my data is ing from database table – Shreyas Pednekar Commented Jan 11, 2019 at 7:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You can use datatables Sum Api

link - https://datatables/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.

You are initializing DataTable() as two time in your code. Just bine 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
            ]);
    });