使用多個復選框過濾資料表，其中一列可以有1個以上的值-有解無憂

我有帶有復選框的資料表過濾記錄。問題是，如果一列中有 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

uj5u.com熱心網友回復：

您的代碼中的問題是因為您要在可以包含“XY 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>

uj5u.com熱心網友回復：

您需要將該字串分開以進行單獨檢查。

請查看下面的 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();
        });

        } );

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387797.html

標籤：查询数据表数据表

上一篇：如何編輯此jQuery以將其更改保存到localStorage？

下一篇：用JQuery替換Textarea輸入