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

问题描述

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

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

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

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

解决方案

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

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

这将在 上返回 33，值为 33，Tokyo 在 是选择东京的地方.然后将所需的列定义为 html-input ;

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

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

关于实时数据:问题是，基于类型的过滤器仅被调用一次.dataTables 然后缓存返回的值，因此它不需要一遍又一遍地计算"所有值.幸运的是，dataTables 1.10.x 具有用于 cells、rows 和 pages 的内置函数，称为 invalidate 强制 dataTables重置所选项目的缓存.

然而，在处理

时也存在问题，即编辑值不是改变 value 属性本身.因此，即使您调用 invalidate()，您最终仍会过滤旧的硬编码"值.

但我已经找到了解决方案.强制 的 value 属性用 的当前值(新值)和then 调用 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();});

在处理 时也是如此.您需要更新相关 的 selected 属性，然后更新单元格的 invalidate() :

$("#example td select").on('change', function() {var $td = $(this).closest('td');var 值 = 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/尝试更改输入和/或下拉列表的内容，并搜索新值...

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?

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.

解决方案

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();
};

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] }
    ] 
});

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

---

Regarding live data: 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.

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.

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).closest('td');
  $td.find('input').attr('value', this.value);
  table.cell($td).invalidate();
});

For textareas use text() instead :

$("#example td textarea").on('change', function() {
  var $td = $(this).closest('td');
  $td.find('textarea').text(this.value);
  table.cell($td).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).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();
}); 

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屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.