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。否则，下拉列表将触发对列（1）的表搜索，并选择SELECT的VALUE（不是文本！）并重绘表格。

注意：我也改变了SELECT的值属性，因为它们在开始时是错误的。

DataTables列（）。search（）上的文档可以找到HERE。

来自json数据的（过滤）DataTables

1 个答案: