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

});

所以基本上你告诉你的 SELECT 元素等待它的值被改变。为了显示 ALL，将 .search() 参数设置为空字符串，这将返回 ALL。否则，下拉菜单将使用您的 SELECT 中选定的 VALUE（不是文本！）在 column(1) 上触发表格搜索并重绘您的表格。

注意：我还更改了您的 SELECT 的值属性，因为它们一开始是错误的。

关于 column().search() 的 DataTables 文档可以在 HERE 找到。