过滤列中低于值的数据表函数

Question

我正在尝试创建一个按钮，单击该按钮后，它会过滤掉我的 datatable 中特定列小于 6 的地方。我正在尝试处理 this 示例，但遇到了困难我缺乏 programming/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 table如下：

<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>0,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>,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>3,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>2,000</td>
            </tr>
        </tbody>
    </table>

</div>

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

更新

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

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

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

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

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

如果没有这个额外的步骤，重置函数本身将如下所示：

按钮：

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

这个片段需要放在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();
  }

过滤列中低于值的数据表函数

Datatable function that filters below value in column

javascript

jquery

datatables