JQuery Datatables在输入内搜索并选择 [英] JQuery Datatables search within input and select

问题描述

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

Using Jquery Datatables with inputs and selects as shown here: http://datatables.net/examples/api/form.html or if I used a custom column render handler to produce the input and selects how can I make the global table search work?

如果您将看到您将注意到的示例，只有第一列（只读）列在搜索中，可以如何在搜索中包含其他列？

If you view the example you'll notice that only the first column, the read only one, is included in the search, what can I do to include the other columns in the search?

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

If you view the example in the link in my question and type "Tokyo" into the search all rows are returned. This is because "Tokyo" is an option in all dropdowns. I would want only rows with Tokyo selected to show. If you type in "33" you see no rows even though the first row has a value of "33" in the first column.

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

I can't seem to find any documentation on how to define what the search value is for a particular cell in a datatable.

推荐答案

。而在（sub）版本之间，它似乎工作方式不同，或者不起作用。我认为dataTables是为了自动检测HTML列，但由于某种原因，大多数时候，它不是。最安全的方法是创建自己的搜索过滤器：

It is not very well documented. And it seems to work differently, or not work at all, between (sub)versions. I think dataTables is intended to automatically detect HTML-columns, but for some reason, most of the times, it doesnt. The safest way is to create your own search-filter :

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

这将返回< input> ; 的价值为33，而东京在< select> 的东京被选中。然后定义所需的列，类型为 html-input ;

This will return 33 on <input>'s with value 33, and Tokyo on <select>'s where Tokyo is selected. Then define the desired columns as of type 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/

see demo based on http://datatables.net/examples/api/form.html -> http://jsfiddle.net/a3o3yqkw/

更新。问题是，基于类型的过滤器只能被称为一次。 dataTable然后缓存返回的值，因此不需要一遍又一遍地计算所有的值。幸运的是，dataTables 1.10.x 有一个内置的功能，用于单元格， rows 和页面称为 invalidate 强制dataTables重置所选项目的缓存。

Update. The issue is, that the type based filter only is called once. dataTables then caches the returned values so it not need to "calculate" all the values over and over. Luckily, dataTables 1.10.x has a built-in function for cells, rows and pages called invalidate that forces dataTables to reset the cache for the selected items.

但是，当处理< input> 时，还有一个问题，即编辑值不正在更改值属性本身。因此，即使您调用 invalidate（），您仍然会对旧的硬编码值进行过滤。

However, when dealing with <input>'s there is also the problem, that editing the value not is changing the value attribute itself. So even if you call invalidate(), you will still end up in filtering on the old "hardcoded" value.

但是我找到了一个解决方案。强制< input> 的值属性更改为< input> ; 的当前值（新值）和然后调用 invalidate ：

But I have found a solution for this. Force the <input>'s value attribute to be changed with the <input>'s current value (the new value) and then call invalidate :

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

处理< select> 的。您将需要更新相关< option> 的选定的属性，然后 invalidate（）单元格：

This is also the case when dealing with <select>'s. You will need to update the selected attribute for the relevant <option>'s and then invalidate() the cell as well :

$("#example td select").on('change', function() {
    var $td = $(this).parent();
    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().draw();
}); 

分叉小提琴 - > http://jsfiddle.net/s2gbafuz/ 尝试更改输入内容和/或下拉列表，并搜索新值...

forked fiddle -> http://jsfiddle.net/s2gbafuz/ Try change content of the inputs and/or the dropdowns, and search for the new values ...

这篇关于JQuery Datatables在输入内搜索并选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！