javascript - 数据表行数不适用于搜索结果

Question

在 View 中，代码工作正常并向我显示计数和结果。也在搜索中。但是，当我搜索任何单词时，我希望根据搜索结果进行计数，但在我的情况下，它会显示所有价格字段的总数。它没有显示当前的搜索结果数。谁能帮帮我？

用于自定义搜索和最后两个字段计数的我的数据表代码:

$(document).ready(function() {
    var table = $('#example').DataTable({
        "scrollX": true,
        "bLengthChange": false,
        dom: 'Bfrtip',
        buttons: [{
        extend: "excel",
        className: "darse"
    },{
        extend: "print",
        className: "ddf"
    }]
});

Answer 1

确保在 selector-modifier 中设置 search: 'applied'的 column方法。

$('<p>' + table.column(6, {
    page: 'current',
    search: 'applied'
}).data().sum() + '</p>').prependTo('#demo');

在初始抽奖后，您也只调用了一次总和。将对 sum 的调用移至 drawCallback . 下面是一个例子:

$.fn.DataTable.Api.register('column().data().sum()', function() {
  return this.reduce(function(a, b) {
    var x = parseFloat(a) || 0;
    var y = parseFloat(b) || 0;
    return x + y;
  }, 0);
});

$(document).ready(function() {
  var table = $('#example').DataTable({
    "bLengthChange": false,
    dom: 'Bfrtip',
    drawCallback: function(settings) {
      var api = this.api();
      $('<p>' + api.column(1, {
          page: 'current',
          search: 'applied'
      }).data().sum() + '</p>').prependTo('#demo');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<span id="demo" />
<table id="example">
  <thead>
    <tr>
      <th>Text</th>
      <th>Number</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Text</th>
      <th>Number</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Gamma</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Delta</td>
      <td>5</td>
    </tr>
  </tbody>
</table>