DataTables footerCallback - conditional on another cell

问题

I'm trying to implement a footerCallback in DataTables that computes a conditional sum of each column, based on a cell that's in a different column in the same row. Here's a demo of my setup: https://jsfiddle.net/rantoun/552y9j90/13/

HTML:

<table id="table1">
  <thead>
    <tr>
      <th>Fruit</th>
      <th>sumCondition</th>
      <th># Eaten</th>
      <th># Remaining</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th align="center">Count</th>
      <th align="left"></th>
      <th align="left"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Use</td>
      <td>3</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Use</td>
      <td>6</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Ignore</td>
      <td>2</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

jQuery:

$("#table1").DataTable({
  "paging": false,
  "searching": false,
  "info": false,    
    "footerCallback": function ( row, data, start, end, display ) {

      var columns = [2, 3];
      var api = this.api();

      _.each(columns, function(idx) {

          var total = api
              .column(idx)
              .data()
              .reduce(function (a, b) {
                  return parseInt(a) + parseInt(b);
              }, 0)         

                $('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total);
      })

  }
});

Specifically, my goal is for the footerCallback to only sum the rows where "Ignore" is NOT in the Condition column. Hopefully this is clear and any help is appreciated.

回答1:

I solved this by getting the current index of the summing value in the reduce function, and then used the index to access the respective value in the condition cell. Below is the new jQuery code:

$("#table1").DataTable({
  "paging": false,
  "searching": false,
  "info": false,    
    "footerCallback": function ( row, data, start, end, display ) {


  var columns = [2, 3];
  //console.log(data);
  var api = this.api();

  // Get sumCondition and put in array     

  _.each(columns, function(idx) {

      var total = api
          .column(idx)
          .data()
          .reduce(function (a, b) {
                // Find index of current value for accessing sumCondition value in same row
                var cur_index = api.column(idx).data().indexOf(b);
                if (api.column(1).data()[cur_index] != "Ignore") {
                return parseInt(a) + parseInt(b);
              }
              else { return parseInt(a); }
          }, 0)         

            $('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total);
  })

} });

Working Fiddle: https://jsfiddle.net/rantoun/552y9j90/14/

来源：https://stackoverflow.com/questions/42180812/datatables-footercallback-conditional-on-another-cell

标签

javascript

jquery

datatables

table-footer