Caluclate total in dynamiclly created JQuery datatable form JSON?

Question

Am new to JavaScript & jQuery. Using jQuery datatables to populate data from JSON API. Table Header is also dynamic which means JSON variable as header text. How to add the total(Column & Row). Want rowwise total and columnwise total.

In this table want to add the Total text at the end of the row and column. Row total and column total.

Ajax Coding:-

function manufacturingSummary(todayDate) {

$('.loader').show();
$.ajax({
    url : adminBaseUrl + "mfgSummary",
    type : "POST",
    crossDomain : true,
    data : {
        "summary_date" : todayDate
    },
    success : function(data) {

        if (data.status == 1) {

            $('.loader').hide();

            var summaryColumns = [];

            $.each( data.prodMfgSummary[0], function( key, value ) {
                    var items = {};
                    items.data = key;
                    items.title = key;
                    items.orderable = false;
                    /*items.className = "dt-body-right { text-align: center; }";*/
                    summaryColumns.push(items);
            });

            createProdSummaryTable(summaryColumns, data.prodMfgSummary);

        } else {

            $('.loader').hide();
            $('#productionSummary').DataTable().clear().draw();

        }
    },
    error : function(xhr, status) {
        $('.loader').hide();
        alert(status);
    }
});

}

Table Creation Code:-

function createProdSummaryTable(columns, mfgSummaryProductData){

$('#productionSummary').dataTable({

    "autoWidth" : false,
    responsive : true,
    "aaData" : mfgSummaryProductData,
    "destroy" : true,
    "aaSorting": [],
    "bFilter": false,
    "aoColumns" : columns,
    "iDeferLoading" : 57
});

}

Help me to solve this issue.

Answer 1

Here is an example using columnDefs and its render and target options gor columnwise and footerCallback for rowwise

var dataSet = [{"name":"Wade Rodriguez","field1":21,"field2":22,"field3":20,"field4":21},{"name":"Maxwell Rush","field1":31,"field2":27,"field3":29,"field4":37},{"name":"Ruiz Murray","field1":40,"field2":30,"field3":27,"field4":31},{"name":"Tanner Crosby","field1":37,"field2":35,"field3":21,"field4":39},{"name":"Shelby Douglas","field1":25,"field2":25,"field3":30,"field4":30},{"name":"Haney Fulton","field1":35,"field2":26,"field3":38,"field4":27}]

$(document).ready(function() {
  var my_columns = [];

  $.each(dataSet[0], function(key, value) {
    var my_item = {};
    my_item.data = key;
    my_item.title = key;
    my_columns.push(my_item);
  });

  my_columns.push({
    title: 'Total'
  })

  $(document).ready(function() {

    $("#example").DataTable({
      data: dataSet,
      "columns": my_columns,
      "columnDefs": [{
        "render": function(data, type, row) {
          return Object.values(row).reduce((a, b) => isNaN(b) ? a : a + b, 0)
        },
        "targets": my_columns.length - 1
      }],
      "footerCallback": function(row, data, start, end, display) {
        $('#example tfoot').html('');
        $('#example').append('<tfoot><td>Total</td></tfoot>');
        var api = this.api();
        var total = 0;

        api.columns([1, 2, 3, 4], {
          page: 'current'
        }).every(function() {
          var sum = this
            .data()
            .reduce(function(a, b) {
              var x = parseFloat(a) || 0;
              var y = parseFloat(b) || 0;
              return x + y;
            }, 0);
          total += sum;
          $('#example tfoot tr').append('<td>' + sum + '</td>');
        });
        $('#example tfoot tr').append('<td>' + total + '</td>');
      }
    });
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
</table>