javascript - 带有(过滤依据)来自 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 中选定的值(不是文本!)对列 (1) 进行表格搜索，并重新绘制表格。

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

可以找到有关 column().search() 的 DataTables 文档 HERE .