JQuery数据表在输入中搜索并选择
使用JQuery Datatable与输入和选择如下图所示：http://datatables.net/examples/api/form.html或者如果我使用自定义列渲染处理程序来生成输入和选择如何使全局表搜索工作？
如果您查看这个示例，您会注意到搜索中只包含第一列，即只读列，我可以做些什么来将其他列包含在搜索中？
如果您在“我的问题”的链接中查看示例，并在搜索中键入“Tokyo”，则返回所有行。这是因为“东京”是所有下拉列表中的一个选项。我只想显示选择了Tokyo的行。如果键入“33”，则即使第一行在第一列中的值为“33”，也不会看到任何行。
我似乎找不到任何关于如何定义datatable中特定单元格的搜索值的文档。
共有3个答案
这应该搜索整个表，而不是特定列。
var table = $('#table').DataTable();
$('#input').on('keyup', function() {
table.search(this.val).draw();
});
如果这里的重点是根据活动值（和常规单元格）搜索表中的所有输入，您可能需要构建自己的自定义搜索（$. fn）。数据able.ext.search.push（）
//custom search function
$.fn.DataTable.ext.search.push((_,__,i) => {
//get current row
const currentTr = dataTable.row(i).node();
//look for all <input>, <select> nodes within
//that row and check whether current value of
//any of those contains searched string
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes($('#search').val().toLowerCase()));
//check whether "regular" cells contain the
//value being searched
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
//make final decision about match
return inputMatch || textMatch || $('#search').val() == ''
});
您可以在下面找到此方法的完整演示：
const srcData = [{id:1,item:'apple',category:'fruit'},{id:2,item:'banana',category:'fruit'},{id:3,item:'goosberry',category:'berry'},{id:4,item:'eggplant',category:'vegie'},{id:5,item:'carrot',category:'vegie'}];
const dataTable = $('table').DataTable({dom:'t',data:srcData,columns:[{title:'Id',data:'id'},{title:'Item',data:'item',render:data=>`<input value="${data}"></input>`},{title:'Category',data:'category',render:data=>`<select>${['fruit', 'vegie', 'berry'].reduce((options, item) => options+='<option value="'+item+'" '+(item == data ? 'selected' : '')+'>'+item+'</option>', '<option value=""></option>')}</select>`}]});
$.fn.DataTable.ext.search.push((_,__,i) => {
const currentTr = dataTable.row(i).node();
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes( $('#search').val().toLowerCase()));
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
return inputMatch || textMatch || $('#search').val() == ''
});
$('#search').on('keyup', () => dataTable.draw());<!doctype html><html><head><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></head><body><input id="search"></input><table></table></body></html>
它没有很好的记录。而且它在（子）版本之间的工作方式似乎有所不同，或者根本不起作用。我认为dataTables旨在自动检测HTML列，但由于某些原因，大多数情况下，它并没有这样做。最安全的方法是创建自己的搜索筛选器：
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};
这将在
var table = $("#example").DataTable({
columnDefs: [
{ "type": "html-input", "targets": [1, 2, 3] }
]
});
请参阅基于的演示http://datatables.net/examples/api/form.html -
关于实时数据：问题是，基于类型的过滤器只调用一次。dataTables然后缓存返回的值，这样就不需要反复“计算”所有值。幸运的是，dataTables 1.10。x有一个内置函数，用于单元格、行和页面，名为无效，它强制数据表为所选项目重置缓存。
但是，在处理
但是我已经找到了解决办法。强制执行
$("#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();
});
处理
$("#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();
});
叉形小提琴-
-
如果我更改为： 代码运行良好-但我想转换工作。
-
问题内容： 我目前正在尝试完成一个项目，其中的规范是使用搜索表单来搜索包装数据库。该数据库具有许多变量，包括大小，名称，类型和肉类。我需要创建一个搜索表单，用户可以在其中使用多种不同的搜索进行搜索（例如搜索50厘米长的盖子托盘）。 我花了整整一天的时间来尝试创建一些PHP代码，这些代码可以在我创建的测试数据库中搜索信息。我遇到了许多错误，从mysql_fetch_array错误，布尔错误到现在，我
-
我使用bootstrap4数据表来显示行限制 > HTML代码 Ajax填充代码 Onload我使用了下面的代码 我用过bellow js
-
我的表（表1）中有一条名为“Jonh Wood Doe Smith”的记录，即使用户键入任何可能的组合，我也想返回它：“John Doe”、“Jonn Wood Smith”等 我实现了一个collumn（全名），它是一个包含所有名称的数组，并打算像这样搜索它： 你知道这是否可能和/或解决这类问题的最佳方法是什么吗？我会使用postgresql，所以专有方法、函数等都不是问题。它不需要与其他数据库
-
这个问题不同于常规的mysql lat/long、基于radius的数据获取 例如，我想搜索包含以下列的mysql数据库表- 现在，如果用户具有lat/long（29.941095/77.812424），则希望知道这些项目中的哪些可以在其位置提供服务。那么我将如何使用php获取结果
-
我试图测试登录功能https://www.expedia.com/网站使用Selenium WebDriver与Java。我也使用页面对象工厂设计模式。 登录的步骤是：转到上面的网站- 以下是我处理Expedia登录表单的代码： 登录页面。java包含： } TC_LoginTest_001。java包含： { } 当我使用run As运行脚本时-- 未在输入字段中输入测试数据（即电子邮件地址和密