mercredi 7 juillet 2021

Checkbox select filter jQuery not working in wordpress but works in codepen

I am using dataTable in WordPress and I have created a checkbox and dropdown select filter. You can see it below It works well in codepen and exported HTML from codepen but when I apply this to the WordPress page, the only the dropdown function is working. I have changed $ to jQuery and added the noConflict() also in the js code but it did not work. Anyone, please help me to solve this.

HTML

<html>
  <head>
    <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">
  </head>
  <body>
    <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>
  </body>
</html>

JS

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

Thank you




Aucun commentaire:

Enregistrer un commentaire