Question

我正在尝试从页脚回调中计算列总和。它没有给我正确的结果。 USE的总和应为12，但显示为24。除了RAHUL以外，它还显示错误的结果。如果重复使用该值，例如6代表USE两次，并且Card和Other中也存在6。在这种情况下，它将计算最新的结果。

JS Fiddle here

$("#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] === "Use") {
            return parseInt(a) + parseInt(b);
          } else {
            return parseInt(a);
          }
        }, 0)

      //
      var rahulTotal = 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] === "Rahul") {
            return parseInt(a) + parseInt(b);
          } else {
            return parseInt(a);
          }
        }, 0)
      $('tr:eq(0) th:eq(' + idx + ')', api.table().footer()).html(total);
    })

  }
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<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>6</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Card</td>
      <td>6</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Other</td>
      <td>6</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Rahul</td>
      <td>2</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Use</td>
      <td>6</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Rahul</td>
      <td>2</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Answer 1

原因

问题是由于此行

<html>

<head>
  <title>test</title>
</head>

<body>
  <nav>
    <ul class="nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a>
        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Resume</a>
        <ul>
          <li><a href="#">item a lonng submenu</a></li>
          <li><a href="#">item</a>
            <ul>
              <li><a href="#">Ray</a></li>
              <li><a href="#">Veronica</a></li>
              <li><a href="#">Bushy</a></li>
              <li><a href="#">Havoc</a></li>
            </ul>
          </li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Rants</a>
        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

</html>

与Array.prototype.indexOf()中的状态

indexOf（）方法返回给定元素的第一个索引可以在数组中找到；如果不存在，则为-1。

因此，通过 b = 6 时，将始终返回第一行

苹果|使用6 | 5

因此，总和为24。

解决方案

以下代码段减少了整个数据，而不是一列，因此无需获取当前行索引。

var cur_index = api.column(idx).data().indexOf(b);

$("#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] === "Use") {
            prev = parseInt(a[idx]);
          }

        } else {
          prev  = a;
        }
        if (b[1] === "Use") {
            next = parseInt(b[idx]);
        }
        return prev + next;
      },0);

      $('tr:eq(0) th:eq(' + idx + ')', api.table().footer()).html(total);
    })

  }
});

Answer 2

尝试一下。我仍然不清楚这个问题。但是从我得到的结果来看，我认为这就是您想要的

$("#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 = 0;
                    _.each(api.column(idx).data(), function(i, v) {
            if(api.column(1).data()[v] === "Use") {
                total = parseInt(total) + parseInt(i);
            }
          });

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

      })

  }
});

jQuery数据表总和条件页脚回调未显示正确的结果

2 个答案:

原因

解决方案