DataTables Calculate Column Total Based on Another Value

Question

Using Datatables 1.10.19

I have five columns in my table, column 2 contains prices, column 5 contains a string. I want to calculate the total of column 2 where column 5 equals 'Cash' .

I also want to perform the calculation based on a date range. How can I achieve this?

I've tried the following but it doesn't work like I want. It successfully calculates the total, but not based on any filter. It simply totals all the values in column 2.

$('.date-range-filter').change(function() {

    // get all values in column 2
    var cashTotalData = api.search('Cash').column(2, {
        page: 'all'
    }).data();

    // calculate all values
    var cashTotalValue = cashTotalData.reduce(function(a, b) {
        return intVal(a) + intVal(b);
    }, 0).toFixed(2);

    console.log(cashTotalValue); // this displays the correct total of *all* values in column 2, but not the total based on my date range

    $('#records').DataTable().draw();
});

Any advice is appreciated.

Answer 1

I don't think you want a .search() , I think you want a .filter() , but I couldn't figure out how to do it. The example I've included below just loops through the rows and totals the dollar amount.

 $(document).ready(function(){ var table = $("#table").DataTable(); $('.date-range-filter').click(function() { let cashTotalValue = 0; table.rows().eq(0).each(function(index){ var row = table.row( index ); console.log(row.data()); // the "type" column is #5, but arrays are 0 based, so subtract one if (row.data()[4] == 'Cash') { // the "amount" column is #2, but arrays are 0 based, so subtract one cashTotalValue += parseInt(row.data()[1]); } }); console.log(cashTotalValue.toFixed(2)); // this displays the correct total of *all* values in column 2, but not the total based on my date range alert(cashTotalValue.toFixed(2)); // this displays the correct total of *all* values in }); }); 

 <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <table id="table"> <thead> <tr> <th>Transaction</th> <th>Amount</th> <th>Description</th> <th>Date</th> <th>Type</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>3</td> <td>Description</td> <td>11/15/2018</td> <td>Cash</td> </tr> <tr> <td>2</td> <td>5</td> <td>Description</td> <td>11/15/2018</td> <td>Credit</td> </tr> <tr> <td>3</td> <td>7</td> <td>Description</td> <td>11/16/2018</td> <td>Cash</td> </tr> <tr> <td>4</td> <td>11</td> <td>Description</td> <td>11/16/2018</td> <td>Credit</td> </tr> </tbody> </table> <input type="button" class="date-range-filter" value="Click"/>