DataTables with json data

Question

私のフィルタがサーバーのjsonデータで動作するようにしようとしていますが、誰かがこれを行うのを助けることができますか？

は私が場所によってフィルタを必要とする：すべて、EUA、中国、スペイン

私が使用しています

：https://datatables.net

HTML：：

<div class=" dashboard"> 
    <div class="col-md-8 no-padding"> 
    <div class="form-group col-md-4 no-padding"> 
     <select class="form-control" id="sel1" > 
     <option value="Filter by">Filter by country </option> 
     <option value="All">All</option> 
     <option value="First name">China</option> 
     <option value="Last name">EUA</option> 
     <option value="Last name">Spain</option> 
     </select> 
    </div> 
    </div> 

<br> 
<br> 
<table id="example" class="display" width="100%" cellspacing="0"> 
<thead> 
     <tr> 
      <th>First name</th> 
      <th>Place</th> 

     </tr> 
    </thead> 
</table> 

jqueryの：

からjquery.dataTables.js

$(document).ready(function() { 
     var dt = $('#example').dataTable(); 
     dt.fnDestroy(); 
    }); 

    $(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/crcCiZXZfm?indent=2'; 
    var table = $('#example').DataTable({ 
     ajax: url, 
    columns: [ 
     { data: 'name' }, 
     { data: 'place' } 
    ] 
    }); 
}); 

jsfiddle： http://jsfiddle.net/ntcwust8/120/

Answer 1

http://jsfiddle.net/f7debwj2/

を追加しましたあなたのdocument.readyに次のコードを（）：

$('#sel1').change(function() { 

    if (this.value === "All") { 
    table 
     .columns(1) 
     .search('') 
     .draw(); 
    } 

    else { 
    table 
     .columns(1) 
     .search(this.value) 
     .draw(); 
    } 

}); 

だから基本的には、その値が変更されるのを待つためにあなたのSELECT要素を教えてください。 ALLを表示するために、.search（）パラメータは空の文字列に設定され、ALLを返します。それ以外の場合、ドロップダウンは、SELECTの選択されたVALUE（テキストではありません）を使用して列（1）の表検索をトリガーし、表を再描画します。

注：：最初は間違っていたので、SELECTの値プロパティも変更しました。

DataTables column（）。search（）のドキュメントはHEREです。