JQuery 数据表在输入中搜索并选择

将 Jquery Datatables 与输入和选择一起使用，如下所示：http://datatables.net/examples/api/form.html或者，如果我使用自定义列呈现处理程序来生成输入并选择如何使全局表搜索工作？

如果您查看该示例，您会注意到搜索中仅包含第一列（只读列），我该怎么做才能将其他列包含在搜索中？

如果您查看我的问题中的链接中的示例并在搜索中输入“Tokyo”，则会返回所有行。这是因为“东京”是所有下拉菜单中的一个选项。我只想显示选择东京的行。如果您输入“33”，即使第一行第一列的值为“33”，您也看不到任何行。

我似乎找不到任何有关如何定义数据表中特定单元格的搜索值的文档。

它没有很好的记录。在（子）版本之间，它的工作方式似乎有所不同，或者根本不起作用。我认为 dataTables 旨在自动检测 HTML 列，但由于某种原因，大多数时候它不会。最安全的方法是创建您自己的搜索过滤器：

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
    return $(value).val();
};

这将返回33 on <input>的值为 33，并且Tokyo on <select>是选择东京的地方。然后定义所需的列类型html-input ;

var table = $("#example").DataTable({
    columnDefs: [
       { "type": "html-input", "targets": [1, 2, 3] }
    ] 
});

查看基于的演示http://datatables.net/examples/api/form.html -> http://jsfiddle.net/a3o3yqkw/

关于实时数据：问题是，仅调用基于类型的过滤器once。然后 dataTables 缓存返回的值，因此不需要一遍又一遍地“计算”所有值。幸运的是，数据表1.10.x有一个内置函数cells, rows and pages called invalidate强制 dataTables 重置所选项目的缓存。

然而，当处理<input>还有一个问题，编辑值不是改变value属性本身。所以即使你打电话invalidate()，您最终仍然会过滤旧的“硬编码”值。

但我已经找到了解决方案。强制<input>'s value要更改的属性<input>的当前值（新值）和then call invalidate :

$("#example td input").on('change', function() {
  var $td = $(this).closest('td');
  $td.find('input').attr('value', this.value);
  table.cell($td).invalidate();
});

对于文本区域使用text()反而 ：

$("#example td textarea").on('change', function() {
  var $td = $(this).closest('td');
  $td.find('textarea').text(this.value);
  table.cell($td).invalidate(); 
});

处理事情时也是如此<select>的。您将需要更新selected相关属性<option>的然后invalidate()细胞也是如此：

$("#example td select").on('change', function() {
  var $td = $(this).closest('td');
  var value = this.value;
  $td.find('option').each(function(i, o) {
    $(o).removeAttr('selected');
    if ($(o).val() == value) $(o).attr('selected', true);
  })
  table.cell($td).invalidate();
}); 

叉形小提琴 ->http://jsfiddle.net/s2gbafuz/尝试更改输入和/或下拉菜单的内容，然后搜索新值...