数据表动态更新总计

Question

根据某些条件（现金/卡），我正在计算页面总加载量，效果很好。现在，我需要它们在搜索时进行动态更改。

将使用默认搜索输入和日期选择器进行搜索。搜索似乎工作正常，但总数未变。

我大部分工作正常，代码在下面。

感谢您的帮助。

html

$(document).ready(function() {

  $('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
  });

  $('#records').DataTable({

    "footerCallback": function(row, data, start, end, display) {

      var api = this.api(),
        data;

      let cashTotalValue = 0;
      let cardTotalValue = 0;
      
      let min = $('#min-date').val() ? $('#min-date').val().split("-") : "";
      let max = $('#max-date').val() ? $('#max-date').val().split("-") : "";
      min = min ? new Date(min[1] + '/' + min[0] + '/' + min[2]) : "";
      max = max ? new Date(max[1] + '/' + max[0] + '/' + max[2]) : "";


      api.rows().eq(0).each(function(index) {
        var row = api.row(index);
        
        var createdAt = row.data().datePaid.split("-") || 0; // Our date column in the table
        createdAt = new Date(createdAt[1] + '/' + createdAt[0] + '/' + createdAt[2]);

        if ((min === "" || moment(createdAt).isSameOrAfter(min)) &&
          (max === "" || moment(createdAt).isSameOrBefore(max))) {
          

          // the "type" column is #5, but arrays are 0 based, so subtract one
          if (row.data().paymentType == 'Cash') {
            // the "amount" column is #3, but arrays are 0 based, so subtract one
            let poundAmount = row.data().amount;
            let amount = 0;
            if (poundAmount.startsWith("£")) {
              amount = parseFloat(poundAmount.substring(1));
            } else {
              amount = parseFloat(poundAmount);
            }
            // console.log(amount);
            cashTotalValue += amount;
            
          }
          if (row.data().paymentType == 'Card') {
            // the "amount" column is #3, but arrays are 0 based, so subtract one
            let poundAmount = row.data().amount;
            let amount = 0;
            if (poundAmount.startsWith("£")) {
              amount = parseFloat(poundAmount.substring(1));
            } else {
              amount = parseFloat(poundAmount);
            }
            // console.log(amount);
            cardTotalValue += amount;
          }
          $('#totalCash').html('Total Cash: ' + cashTotalValue.toFixed(2));
      $('#totalCard').html('Total Card: ' + cardTotalValue.toFixed(2));
        }
      });

/*       $('#totalCash').html('Total Cash: ' + cashTotalValue.toFixed(2));
      $('#totalCard').html('Total Card: ' + cardTotalValue.toFixed(2)); */

    },
    "order": [
      [0, "desc"]
    ],
    "columns": [{
        data: 'datePaid'
      },
      {
        data: 'invoice'
      },
      {
        data: 'amount'
      },
      {
        data: 'chargeType'
      },
      {
        data: 'paymentType'
      },
    ],
    "columnDefs": [{
      targets: [0],
      type: 'date-eu'
    }],

  });
 // Extend dataTables search
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = $('#min-date').val()? $('#min-date').val().split("-") : "";
      var max = $('#max-date').val()? $('#max-date').val().split("-") : "";

      var createdAt = data[0].split("-") || 0; // Our date column in the table
      
      createdAt = new Date(createdAt[1] + '/' + createdAt[0] + '/' + createdAt[2])
      min = min?new Date(min[1] + '/' + min[0] + '/' + min[2]): "";
      max = max?new Date(max[1] + '/' + max[0] + '/' + max[2]):"";
      if (
        (min==="" || max ==="") ||
        (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
      ) {
        return true;
      }
      return false;
    }
  );

  // Re-draw the table when the a date range filter changes
  $('.date-range-filter').change(function() {
    $('#records').DataTable().draw();
  });

});

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudfla
  re.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/date-eu.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div class="container">
  <div class="col-md-4 pull-right">
    <div class="input-group input-daterange">

      <input type="text" id="min-date" class="form-control date-range-filter" data-date-format="dd-mm-yyyy" placeholder="From:">

      <div class="input-group-addon">to</div>

      <input type="text" id="max-date" class="form-control date-range-filter" data-date-format="dd-mm-yyyy" placeholder="To:">

    </div>
  </div>
</div>
<input type="button" id="btn-do-total" value="Total" />
<hr>
<p id="totalCash"></p>
<p id="totalCard"></p>
<hr>
<table id="records" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>date</th>
      <th>Num</th>
      <th>Price</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>date</th>
      <th>Num</th>
      <th>Price</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
  </tfoot>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">27-03-2019</td>
      <td>521735</td>
      <td>£5.20</td>
      <td>overdue</td>
      <td>Card</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">27-03-2019</td>
      <td>513938</td>
      <td>£1.20</td>
      <td>overdue</td>
      <td>Cash</td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">27-03-2019</td>
      <td>523693</td>
      <td>£0.20</td>
      <td>overdue</td>
      <td>Cash</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">27-03-2019</td>
      <td>493645</td>
      <td>£0.10</td>
      <td>overdue renewed</td>
      <td>Cash</td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">27-03-2019</td>
      <td>521734</td>
      <td>£0.20</td>
      <td>overdue</td>
      <td>Card</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">27-03-2019</td>
      <td>493646</td>
      <td>£0.10</td>
      <td>overdue renewed</td>
      <td>Cash</td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">27-03-2019</td>
      <td>523691</td>
      <td>£0.10</td>
      <td>overdue renewed</td>
      <td>Card</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">27-03-2019</td>
      <td>523692</td>
      <td>£0.10</td>
      <td>overdue renewed</td>
      <td>Card</td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">26-03-2019</td>
      <td>523694</td>
      <td>£0.20</td>
      <td>overdue</td>
      <td>Cash</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">26-03-2019</td>
      <td>506326</td>
      <td>£1.20</td>
      <td>overdue</td>
      <td>Card</td>
    </tr>
  </tbody>
</table>

Answer 1

不要在非常基本的单行代码周围冒很多烟，我将在精炼示例上演示我的解决方案，当然，您会明白这个想法，这非常简单-在重绘每个表时刷新总计（通过每次过滤触发），使用drawCallback：

//table source data
const srcData = [
  {item: 'apple', category: 'fruit', qty: 5},
  {item: 'banana', category: 'fruit', qty: 4},
  {item: 'pear', category: 'fruit', qty: 8},
  {item: 'carrot', category: 'vegie', qty: 4},
  {item: 'cabbage', category: 'vegie', qty: 7}
];
//initialize DataTable
const dataTable = $('#mytable').DataTable({
  dom: 'ft',
  data: srcData,
  columns: Object.keys(srcData[0]).map(key => ({title:key, data:key})),
  //refresh your totals upon each table redraw, triggered by filtering
  drawCallback: function(){
    $('#totals').text((this.api().rows({search:'applied'}).data().toArray().reduce((total, item) => total += item.category == 'fruit' ? item.qty : 0, 0)));
  }
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
Total qty of fruits: <span id="totals"></span>
<table id="mytable"></table>
</body>
</html>