表有多个范围过滤器无法正确过滤

问题描述 投票：0回答：1
文本列过滤的任何组合

文本列的任何组合以及第一个数字列（年龄），使用最小值，最大或两者兼而有之

使用最低，最大或两者兼而

this不工作：

  • 年龄和薪水的组合
  • 输入年龄过滤器值，然后薪金过滤器值，工资价值过滤年龄柱。例如，以最低年龄为单位输入40（5个结果），然后100000的薪水却没有结果。但是将薪水更改为65个结果（Ashton Cox，66岁）。
    • 压缩重置过滤器按钮。输入100000的最低工资（6个结果）。现在输入40岁以下年龄（5个结果）。年龄柱已正确过滤，但是工资列现在显示低于最低薪水字段中输入的价值的工资。 我已经写了这本书，打算是灵活的，避免了数字列的数量或其位置的硬编码
  • 我确定我的范围过滤具有不正确的“连词”，但是我无法确定出了什么问题。

function filterColumnRange(table, col) { mininp = $("#min" + col.index()).val() maxinp = $("#max" + col.index()).val() table .column(col) .search( (d) => (d >= mininp * 1 && d <= maxinp * 1) || (mininp === "" && d <= maxinp * 1) || (d >= mininp * 1 && maxinp === ""), ) .draw() } $(document).ready(function() { table = $("#example").DataTable({ layout: { bottomEnd: { buttons: [{ text: 'Reset Filters', action: function() { table.search('').columns().search('').draw(); $('tfoot input').val(''); } }], } } }) table.columns(".dt-type-numeric").every(function() { var column = this var title = column.footer().textContent $( '<input type="text" id="min' + column.index() + '" placeholder="Minimum ' + title + '" />', ) .appendTo($(column.footer())) .on("keyup change clear", function() { filterColumnRange(table, column) }) $( '<input type="text" id="max' + column.index() + '" placeholder="Maximum ' + title + '" />', ) .appendTo($(column.footer())) .on("keyup change clear", function() { filterColumnRange(table, column) }) }) table.columns(":not(.dt-type-numeric)").every(function() { var column = this var title = column.footer().textContent $('<input type="text" placeholder="Filter ' + title + '" />') .appendTo($(column.footer())) .on("keyup change clear", function() { if (column.search() !== this.value) { column.search(this.value).draw() } }) }) })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/3.2.2/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.html5.min.js"></script> <link href="https:/cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/buttons/3.2.2/css/buttons.dataTables.min.css" rel="stylesheet" /> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</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>320800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011-07-25</td> <td>170750</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>86000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012-03-29</td> <td>433060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008-11-28</td> <td>162700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012-12-02</td> <td>372000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012-08-06</td> <td>137500</td> </tr> </tbody> <div id="myDiv"> </div> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table>

问题

我对数据表的了解不足以解释您为什么会看到您看到的问题 - 但是我可以指出

d
函数中的
filterColumnRange
值。如果您的第一个过滤器是在“最低年龄”上的，如果然后通过“最低薪水”过滤，则在处理“年龄”列中的所有值之前，您将在处理“年龄”列中的所有值，然后再处理中的值“薪金”列。到那时为时已晚 - 您的数据已被错误过滤。
我相信DataTables使用了幕后的一系列过滤器，以允许您定义各种自定义过滤器，这些定制过滤器又依次处理每个新事件。由于某种原因（我无法解释）您的
draw
功能将您的“薪水”过滤器应用于“年龄”数据 - 您所看到的。
我没有办法修复这种方法。很可能会有一个简单的解决方案，别人可以为我们所有人分享。

一种可能的解决方案
jquery filter datatables
1个回答
0
投票

，这是一种构建等效过滤器集的方法，但是使用其他方法 - 使用columns（）。search.fixed（），这是DataTables 2.0中的一个新功能。

也许这是可以接受的。 there是一个演示：



filterColumnRange






这种方法基本上是两个官方演示的组合：
range searching和
个体列搜索
.
。

fixed搜索方法似乎非常适合您在这里需要做的事情：




固定搜索（也可以称为粘性或命名搜索）提供了一种轻松添加累积搜索词的方法。您可以添加多个独立的搜索术语，并且DataTables将它们（和逻辑）结合在一起，显示已应用的所有搜索词的结果。

该处理您在问题中提到的“连词”问题。



一个警告：
要重置所有过滤器数据（使用我的“重置过滤器”自定义按钮），我的演示实际上完全从数据表中删除了所有固定搜索，然后重新应用初始搜索状态：


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DataTables</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/3.2.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.html5.min.js"></script>
  <link href="https:/cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" rel="stylesheet" />
  <link href="https://cdn.datatables.net/buttons/3.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />
</head>

<body>
  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</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>320800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011-07-25</td>
        <td>170750</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>86000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012-03-29</td>
        <td>433060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008-11-28</td>
        <td>162700</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012-12-02</td>
        <td>372000</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012-08-06</td>
        <td>137500</td>
      </tr>
    </tbody>
    <div id="myDiv">
    </div>


    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
  </table>

  <script>
    const table = new DataTable('#example', {

      layout: {
        bottomEnd: {
          buttons: [{
            text: 'Reset Filters',
            action: function() {
              $('tfoot input').val('');
              clearFixedFilters();
              table.search('').columns().search('').draw();

            }
          }],
        }
      },

      initComplete: function() {

        // non-numeric fields:
        this.api()
          .columns(":not(.dt-type-numeric)")
          .every(function() {
            let column = this;
            let title = column.footer().textContent;

            // Create input element
            let input = document.createElement('input');
            input.placeholder = title;
            column.footer().replaceChildren(input);

            // Event listener for user input
            input.addEventListener('keyup', () => {
              if (column.search() !== this.value) {
                column.search(input.value).draw();
              }
            });
          });

        // numeric fields using min/max ranges:
        this.api()
          .columns(".dt-type-numeric")
          .every(function() {
            let column = this;
            let title = column.footer().textContent;

            // Create input elements
            let inputMin = document.createElement('input');
            inputMin.placeholder = "min " + title;
            let inputMax = document.createElement('input');
            inputMax.placeholder = "max " + title;
            column.footer().replaceChildren(inputMin, inputMax);

            // Event listeners for user inputs
            inputMin.addEventListener('input', function() {
              table.draw();
            });
            inputMax.addEventListener('input', function() {
              table.draw();
            });
          });

      }
    });

    function setUpFixedFilter() {
      table.columns(".dt-type-numeric")
        .every(function() {
          let column = this;
          column.search.fixed('my-range', function(cellData) {

            var min = parseInt(column.footer().childNodes[0].value, 10);
            var max = parseInt(column.footer().childNodes[1].value, 10);
            var data = parseFloat(cellData) || 0;

            if (
              (isNaN(min) && isNaN(max)) ||
              (isNaN(min) && data <= max) ||
              (min <= data && isNaN(max)) ||
              (min <= data && data <= max)
            ) {
              return true;
            }

            return false;

          });
        });
    }

    function clearFixedFilters() {
      table.columns().search.fixed('my-range', null);
      setUpFixedFilter();
    }

    setUpFixedFilter();
  </script>

</body>


这种感觉有点沉重，可能有更好的方法来做到这一点。
    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.