Question

我在 WordPress 中使用数据表。我创建了一个复选框和下拉选择过滤器。你可以在下面看到它。它在 Codepen 中运行良好并从 Codepen 导出 HTML，但是当我将它应用到 WordPress 页面时，只有下拉功能在工作。我已将 $ 更改为 jQuery 并在 JS 代码中添加了 noConflict()，但它不起作用。

谁能帮我解决这个问题。

$(document).ready(function() {
  dataTable = $("#example").DataTable({
    "columnDefs": [{
      "targets": [3],
      "visible": false
    }]
  });
  
  /*  
    $('.filter-checkbox').on('change', function(e){
        var searchTerms = []
        $.each($('.filter-checkbox'), function(i,elem){
          if($(elem).prop('checked')){
            searchTerms.push("^" + $(this).val() + "$")
          }
        })
        dataTable.column(2).search(searchTerms.join('|'), true, false, true).draw();
      });
    */
    
  $('input:checkbox').on('change', function() {
    //build a regex filter string with an or(|) condition
    var positions = $('input:checkbox[name="pos"]:checked').map(function() {
      return '^' + this.value + '$';
    }).get().join('|');

    //filter in column 1, with an regex, no smart filtering, not case sensitive
    dataTable.column(2).search(positions, true, false, false).draw(false);
  });

  $('.status-dropdown').on('change', function(e) {
    var status = $(this).val();
    $('.status-dropdown').val(status)
    console.log(status)
    //dataTable.column(6).search('\\s' + status + '\\s', true, false, true).draw();
    dataTable.column(3).search(status).draw();
  })
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

<div class="container">
  <div class="content">
    <div class="row">
      <div class="col-8">
        <div class="filter-wrapper">
          <input type="checkbox" name="pos" value="Wholesalers">Wholesalers
          <input type="checkbox" name="pos" value="GDS">GDS
        </div>
      </div>
      <div class="col-4">
        <div class="btn-group submitter-group float-right">
          <select class="form-control status-dropdown">
            <option value="">Region</option>
            <option value="Global">Global</option>
            <option value="Australia">Australia</option>
            <option value="United Kingdom">United Kingdom</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <table id="example" class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Region</th>
        <th>Industry</th>
        <th>Hidden</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HaoQiao<br/>&lt;p&gt;About HaoQiao&lt;/p&gt;<br/>&lt;span class=&quot;desc&quot;&gt;&lt;/span&gt;</td>
        <td>China</td>
        <td>Wholesalers</td>
        <td>China</td>
      </tr>
      <tr>
        <td>STGlobe<br/>&lt;p&gt;About STGlobe&lt;/p&gt;<br/>&lt;span class=&quot;desc&quot;&gt;&lt;/span&gt;</td>
        <td>Global</td>
        <td>Wholesalers</td>
        <td>Global</td>
      </tr>
      <tr>
        <td>Broadway Travel<br/>&lt;p&gt;About Broadway Travel&lt;/p&gt;<br/>&lt;span class=&quot;desc&quot;&gt;&lt;/span&gt;</td>
        <td>United Kingdom</td>
        <td>Wholesalers</td>
        <td>United Kingdom</td>
      </tr>
      <tr>
        <td>Abreu Online<br/>&lt;p&gt;About Abreu Online&lt;/p&gt;<br/>&lt;span class=&quot;desc&quot;&gt;&lt;/span&gt;</td>
        <td>Global</td>
        <td>Wholesalers</td>
        <td>Global</td>
      </tr>
      <tr>
        <td>Across Australia</td>
        <td>Australia</td>
        <td>Wholesalers</td>
        <td>Australia</td>
      </tr>
      <tr>
        <td>Galileo</td>
        <td>Global</td>
        <td>GDS</td>
        <td>Global</td>
      </tr>
      <tr>
        <td>WorldSpan</td>
        <td>Global</td>
        <td>GDS</td>
        <td>Global</td>
      </tr>
      <tr>
        <td>Apollo</td>
        <td>Global</td>
        <td>GDS</td>
        <td>Global</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

复选框选择过滤器 jQuery 在 wordpress 中不起作用，但在 codepen 中起作用

0 个答案: