过滤列中值以下的数据表函数

Question

我正在尝试创建一个按钮，当单击该按钮时，它会过滤我的 datatable，其中特定列小于 6。我正在尝试处理 this 示例，但由于我缺乏编程而有点挣扎/Javascript 知识。

任何帮助表示赞赏

    function filterBelowSix() {
        var maxScore = 6;
        var totalScoreField = parseFloat( data[3] ); // use data for the total score column i think this the column index
        var table = $('#customer_df').DataTable();

        if (maxScore <= totalScoreField) {
            return true;
        } else { return false;}


       // how do i pass if else statement to table, so then i can order by specific columns after its been filtered? 
        table.order([8,'desc' ],[3,'asc']).draw();
     
    }

那么按钮会是这样的：

 <a class="quick-filter" href="#" onclick="filterBelowSix(); return false;">Filter below 6</a>

Answer 1

您可以使用链接示例中提到的相同过滤功能：

$.fn.dataTable.ext.search.push()

将此与按钮的单击事件以及所需的排序 API 调用相结合，我们得到了这样的结果：

$(document).ready(function() {

  var table = $('#example').DataTable();

  // register the click event for our button
  // I prefer doing this as opposed to using onclick in the button itself
  $( "#below_x" ).click(function() {
    filterBelowValue();
  });

  // the filter followed by a sort and table re-draw:
  function filterBelowValue() {
    var threshold = 60; // or whatever you want
    var colIdx = 3; // 4th column (first col has index of 0)

    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        return (data[colIdx] < threshold);
      }
    );

    table.column( colIdx ).order( 'asc' ).draw();
  }

} );

在我的测试用例中，按钮和HTML表格如下：

<div style="margin: 20px;">

    <button id="below_x" type="button">Click Me!</button> 

    <br><br>

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>

</div>

因此，列索引 3 是“年龄”列 - 我过滤所有年龄小于 60 的记录 - 然后按该列排序（按升序排列）。

---

更新

补充问题：如何重置数据以移除过滤器？

这可以使用类似的技术来完成 - 但需要一个重要的额外步骤。

当前的过滤逻辑涉及将函数推送到搜索 API：

$.fn.dataTable.ext.search.push(...);

如果我们想删除过滤器，我们将执行不同的功能来实现这一点。因此，我们必须从过滤器 API 中删除初始函数（我们必须将 pop 从我们创建的函数数组中删除。通常这将是一个包含一个的数组。

如果没有这个额外的步骤，reset 函数本身看起来像这样：

按钮：

<button id="reset" type="button">Reset!</button> 

事件处理程序：

$( "#reset" ).click(function() {
  doReset();
});

还有doReset 函数：

function doReset() {
    
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      return true; // show all rows!
    }
  );
  table.column( 0 ).order( 'asc' ).draw();
}

但是，如上所述，这会将第二个函数推送到过滤函数数组中 - 由于第一个函数（过滤数据的函数）仍然存在，因此第二个函数不会按预期工作。

因此我们必须先清除函数数组：

while($.fn.dataTable.ext.search.length > 0) {
  $.fn.dataTable.ext.search.pop();
}

这个fragment需要放在filter函数和all-clear函数之前：

  function filterBelowValue() {
    var threshold = 60; // or whatever you want
    var colIdx = 3; // 4th column (first col has index of 0)

    while($.fn.dataTable.ext.search.length > 0) {
      $.fn.dataTable.ext.search.pop();
    }

    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        return (data[colIdx] < threshold);
      }
    );
    table.column( colIdx ).order( 'asc' ).draw();

  }

  function doReset() {
    while($.fn.dataTable.ext.search.length > 0) {
      $.fn.dataTable.ext.search.pop();
    }
    
    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        return true; // show all rows!
      }
    );
    table.column( 0 ).order( 'asc' ).draw();
  }