DataTables с (фильтром) от данных json

Question

Я пытаюсь сделать мой фильтр работать с данными json с сервера, кто-то может помочь мне сделать это?

мне нужен фильтр по местам: Все, EUA, Китай, Испания

Я использую: jquery.dataTables.js от: 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:

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

}); 

Так в основном вы сообщите ВЫБЕРИТЕ элемент ждать его значение должно быть изменено. Чтобы показать ВСЕ, параметр .search() установлен в пустую строку, которая вернет ALL. В противном случае выпадающее меню инициирует поиск таблицы в столбце (1) с выбранным VALUE (не текстом!) Вашего SELECT и перерисовывает таблицу.

Примечание: Я также изменил свойства свойства вашего SELECT, поскольку они были неправильными в начале.

DataTables Документация по столбцу(). Search() можно найти HERE.