JQuery Datatables在输入和选择中搜索

Question

使用带有输入和选择的Jquery数据表,如下所示:http://datatables.net/examples/api/form.html 或者如果我使用自定义列呈现处理程序来生成输入并选择如何使全局表搜索工作？

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

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

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

Answer 1

它没有很好的记录.并且它似乎在(子)版本之间以不同的方式工作,或者根本不工作.我认为dataTables旨在自动检测HTML列,但出于某种原因,大多数情况下,它不会.最安全的方法是创建自己的搜索过滤器:

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

这将返回33上<input>的值为33,和东京在<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/

关于实时数据:问题是,基于类型的过滤器仅被调用一次.然后dataTables缓存返回的值,因此不需要反复"计算"所有值.幸运的是,数据表1.10.x有一个内置的功能cells,rows并pages呼吁invalidate该部队的DataTable重置缓存为选定的项目.

然而,当处理<input>时还存在问题,编辑值不是改变value属性本身.所以即使你打电话invalidate(),你仍然会过滤旧的"硬编码"值.

但我找到了解决方案.强制使用当前值(新值)更改<input>的value属性<input>,然后调用invalidate:

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

对于textareas使用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/尝试更改输入内容和/或下拉菜单,并搜索新值...

Answer 2

这应该搜索整个表而不是特定列。

var table = $('#table').DataTable();

$('#input').on('keyup', function() {
  table.search(this.val).draw();
});