Datentabellen mit zusätzlicher Auswahl Form

Question

hier sind mein Code:

Javascript:

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": '../ajax/data/arrays.txt' 
    }); 
}); 

HTML

<select id="office-select" name="idOffice"> 
    <option value="">All</option> 
    <option value="1">Berlin</option> 
    <option value="2">New York</option> 
    <option value="3">Tokio</option> 
</select> 
<table id="example" class="display" width="100%" cellspacing="0"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Extn.</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Extn.</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
    </table> 

Nachdem ich Büro (zB New York) von ausgewählter Form wählen, ich will um den Inhalt der Tabelle dynamisch aus der Datei '../ajax/data/arrays.txt?idOffice=2' zu laden

Wie kann Ich tue es? Vielen Dank :)

Answer 1

den Code unten benutzen:

$('#office-select').on('change', function(){ 
    $('#example').DataTable().column(2).search($(this).val()).draw(); 
}); 

Siehe this example für Code und Demonstration.