Spalte nach Dropdown-Werten filtern mit DataTables

Question

Ich verwende den DataTables-Plug (Version 1.10.12), um eine Tabelle auf meiner Website anzuzeigen. Eine Spalte der Tabelle, „status“ genannt, enthält ein Dropdown-Feld mit, wie:

<tr> 
<td> 
... 
    <select name="dropdown_status" id="139"> 
     <option value="-1">canceled</option> 
     <option value="1" selected>open</option> 
     <option value="2">in work</option> 
     <option value="3">waiting</option> 
     <option value="4">closed</option> 
    </select> 
... 
</td> 
</tr> 

ich von diesem status -column filtern möchten, beispiels zeigen nur Zeilen, die den Status closed ausgewählt haben. Die Standardfilterung funktioniert natürlich nicht bei solchen Inhalten, weil es kein einfacher Text ist, der gefiltert werden muss, sondern HTML-Code, der entfernt werden muss. Ich habe verschiedene Ansätze mit Selektoren, der DataTables Render- und Suchfunktion ausprobiert. Ich bin sehr neu in JavaScript, AJAX, JQuery und DataTables und mir sind die Ideen ausgegangen. Jede Hilfe würde sehr geschätzt werden.

Answer 1

JS-Code:

$(document).ready(function() { 
    $('#example').DataTable({ 
     initComplete: function() { 
      this.api().columns().every(function() { 
       var column = this; 
       var select = $('<select><option value=""></option></select>') 
        .appendTo($(column.footer()).empty()) 
        .on('change', function() { 
         var val = $.fn.dataTable.util.escapeRegex(
          $(this).val() 
         ); 

         column 
          .search(val ? '^'+val+'$' : '', true, false) 
          .draw(); 
        }); 

       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="'+d+'">'+d+'</option>') 
       }); 
      }); 
     } 
    }); 
}); 

HTML-Code:

<table id="example" class="display" cellspacing="0" 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> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 

     </tbody> 
    </table> 

Fügen Sie diese Datentabelle jquery Dateien:

https://code.jquery.com/jquery-1.12.3.js

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js