使用DataTable.js对来自js的数据进行单独列搜索筛选

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据行 -->
  </tbody>
</table>

$(document).ready(function() {
  $('#myTable').DataTable({
    searching: true, // 开启搜索功能
    columnDefs: [{
      targets: '_all',
      searchable: true // 所有列都可搜索
    }]
  });
});

$.ajax({
  url: 'data.json',
  success: function(data) {
    var table = $('#myTable').DataTable();
    table.clear(); // 清空表格数据
    for (var i = 0; i < data.length; i++) {
      table.row.add([data[i].column1, data[i].column2, data[i].column3]); // 添加数据行
    }
    table.draw(); // 重新绘制表格
  }
});