DataTables footerCallback - 以另一个单元格为条件

Question

我正在尝试在 DataTables 中实现一个 footerCallback，它根据同一行不同列中的单元格计算每列的条件总和。这是我的设置演示：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);
      })

  }
});

具体来说，我的目标是让 footerCallback 仅对 "Ignore" 不在条件列中的行求和。希望这是明确的，任何帮助表示赞赏。

Answer 1

我通过在 reduce 函数中获取求和值的当前索引然后使用该索引访问条件单元格中的相应值来解决此问题。下面是新的 jQuery 代码：

$('#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);
    });

  },
});

工作 Fiddle: https://jsfiddle.net/rantoun/552y9j90/14/

Answer 2

当列中的行具有相同的编号时出现问题。不应用“if”语句的地方。根据这个题目回答：

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>6</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];
      //console.log(data);
      var api = this.api();
      
      // Get sumCondition and put in array     
      
      _.each(columns, function(idx) {

    var total = total = api.data().reduce(function(a, b) {
      var prev = 0;
      var next = 0;
      if (Array.isArray(a)) {
        if (a[1] !== "Ignore") {
          prev = parseInt(a[idx]);
        }

      } else {
        prev  = a;
      }
      if (b[1] !== "Ignore") {
          next = parseInt(b[idx]);
      }
      return prev + next;
              }, 0)         

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

工作Fiddle：https://jsfiddle.net/79fx6aqg/1/

DataTables footerCallback - 以另一个单元格为条件

DataTables footerCallback - conditional on another cell

javascript

jquery

datatables

table-footer