DataTables footerCallback-以另一个单元为条件 [英] DataTables footerCallback - conditional on another cell

问题描述

我正在尝试在DataTables中实现一个footerCallback，该计算基于同一行中不同列中的单元格来计算每列的条件和.这是我的设置的演示: https://jsfiddle.net/rantoun/552y9j90/13/

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);
      })

  }
});

具体来说，我的目标是使footerCallback仅对条件"列中未包含忽略"的行求和.希望这很清楚，希望能对您有所帮助.

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.

推荐答案

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

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);
  })

} });

工作小提琴:: https://jsfiddle.net/rantoun/552y9j90/14/

这篇关于DataTables footerCallback-以另一个单元为条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！