过滤具有多个复选框的数据表，其中一列可以具有多个值

Question

我有带有复选框的数据表过滤记录。问题是如果一列中有 2 个值，则复选框过滤器找不到该行。

例如，“呼叫”、“会议”和“电子邮件”有 3 个复选框。 如果表中的一行具有“呼叫”和“电子邮件”的值，那么如果您想按“电子邮件”进行过滤，则不会显示该行。它看不到它，因为它不只是说“电子邮件”。它说“呼叫电子邮件”

$(document).ready(function() {
  $.fn.dataTable.ext.search.push(
    function(settings, searchData, index, rowData, counter) {
      var positions = $('input:checkbox[name="pos"]:checked').map(function() {
        return this.value;
      }).get();

      if (positions.length === 0) {
        return true;
      }

      if (positions.indexOf(searchData[1]) !== -1) {
        return true;
      }

      return false;
    }
  );


  $.fn.dataTable.ext.search.push(
    function(settings, searchData, index, rowData, counter) {

      var offices = $('input:checkbox[name="ofc"]:checked').map(function() {
        return this.value;
      }).get();


      if (offices.length === 0) {
        return true;
      }

      if (offices.indexOf(searchData[2]) !== -1) {
        return true;
      }

      return false;
    }
  );


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

  $('input:checkbox').on('change', function() {
    table.draw();
  });

});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="container">
  <hr>
  <div id="position">
    <input type="checkbox" name="pos" value="Call">Call
    <input type="checkbox" name="pos" value="Meeting">Meeting
    <input type="checkbox" name="pos" value="Email">Email
  </div>
  <hr>
  <div id="ofice">
    <input type="checkbox" name="ofc" value="GBP">GBP
    <input type="checkbox" name="ofc" value="EUR">EUR
    <input type="checkbox" name="ofc" value="USD">USD
  </div>
  <hr>
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Currency</th>
        <th>Age</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Currency</th>
        <th>Age</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>Call</td>
        <td>GBP</td>
        <td>61</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Meeting</td>
        <td>USD</td>
        <td>63</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Call</td>
        <td>GBP</td>
        <td>66</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Meeting</td>
        <td>GBP</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jenna Elliott</td>
        <td>Call</td>
        <td>USD GBP</td>
        <td>33</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Call Email</td>
        <td>GBP USD</td>
        <td>61</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Meeting</td>
        <td>EUR</td>
        <td>59</td>

      </tr>
      <tr>
        <td>Rhona Davidson</td>
        <td>Email</td>
        <td>GBP</td>
        <td>55</td>
      </tr>
      <tr>
        <td>Colleen Hurst</td>
        <td>Email Meeting</td>
        <td>EUR</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>

http://live.datatables.net/qeqezali/1/edit

Answer 1

您的代码中的问题是因为您要在可以包含“X Y Z”的字符串中寻找“X”的绝对匹配。因此你需要改变你的逻辑。

执行此操作的一种方法是从 Datatable 单元格中的值创建一个数组，然后将其与选中的单选按钮数组进行比较。如果有匹配项，则显示该行。

另外，对$.fn.dataTable.ext.search的两次调用可以结合起来，让逻辑稍微简洁一些。

最后，请注意 jQuery 1.11.3 已经过时了。在撰写本文时，我更新了示例以使用最新版本的 jQuery - 3.6.0。

jQuery($ => {
  $.fn.dataTable.ext.search.push((_, searchData) => {
    let positions = $('input:checkbox[name="pos"]:checked').map((i, el) => el.value).get();
    let offices = $('input:checkbox[name="ofc"]:checked').map((i, el) => el.value).get();

    const posMatches = positions.filter(p => searchData[1].split(' ').includes(p));
    const ofcMatches = offices.filter(o => searchData[2].split(' ').includes(o));
    return posMatches.length > 0 || ofcMatches.length > 0 || (positions.length == 0 && offices.length == 0);
  });

  var table = $('#example').DataTable();
  $('input:checkbox').on('change', function() {
    table.draw();
  });
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<div class="container">
  <hr>
  <div id="position">
    <input type="checkbox" name="pos" value="Call">Call
    <input type="checkbox" name="pos" value="Meeting">Meeting
    <input type="checkbox" name="pos" value="Email">Email
  </div>
  <hr>
  <div id="ofice">
    <input type="checkbox" name="ofc" value="GBP">GBP
    <input type="checkbox" name="ofc" value="EUR">EUR
    <input type="checkbox" name="ofc" value="USD">USD
  </div>
  <hr>
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Currency</th>
        <th>Age</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Currency</th>
        <th>Age</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>Call</td>
        <td>GBP</td>
        <td>61</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Meeting</td>
        <td>USD</td>
        <td>63</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Call</td>
        <td>GBP</td>
        <td>66</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Meeting</td>
        <td>GBP</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jenna Elliott</td>
        <td>Call</td>
        <td>USD GBP</td>
        <td>33</td>
      </tr>
      <tr>
        <td>Brielle Williamson</td>
        <td>Call Email</td>
        <td>GBP USD</td>
        <td>61</td>
      </tr>
      <tr>
        <td>Herrod Chandler</td>
        <td>Meeting</td>
        <td>EUR</td>
        <td>59</td>

      </tr>
      <tr>
        <td>Rhona Davidson</td>
        <td>Email</td>
        <td>GBP</td>
        <td>55</td>
      </tr>
      <tr>
        <td>Colleen Hurst</td>
        <td>Email Meeting</td>
        <td>EUR</td>
        <td>39</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

您需要将该字符串分开以进行单独检查。

请查看下面的 JS 代码示例：

$(document).ready( function () {
    $.fn.dataTable.ext.search.push(
        function( settings, searchData, index, rowData, counter ) {
            var positions = $('input:checkbox[name="pos"]:checked').map(function() {
                return this.value;
            }).get();
        
            if (positions.length === 0) {
                return true;
            }
            var searchDataStr = searchData[1].split(" ");
            var row_status = false;
            $(searchDataStr).each(function(kk, vv){
                
                if (positions.indexOf(vv) !== -1) {
                row_status = true;
                }  
            })
            if(row_status == true){
                return true;
            }
            
            return false;
            }
        );

        
        $.fn.dataTable.ext.search.push(
            function( settings, searchData, index, rowData, counter ) {
        
            var offices = $('input:checkbox[name="ofc"]:checked').map(function() {
                return this.value;
            }).get();
        

            if (offices.length === 0) {
                return true;
            }
            
            if (offices.indexOf(searchData[2]) !== -1) {
                return true;
            }
            
            return false;
            }
        );
        

        var table = $('#example').DataTable();
        
        $('input:checkbox').on('change', function () {
            table.draw();
        });

        } );