修改 datatables.search 函数后的奇怪行为 [英] Odd behavior of datatables.search function after modifying it
问题描述
这个问题是对这个问题的后续.
为了演示目的，我创建了这个 JSFiddle.
I've created this JSFiddle for demonstration purposes.
请注意，在 column1 中搜索值时，搜索按预期工作.但是，在 column2 中搜索值(使用相同的搜索字段")时，data_table.search 似乎根本没有被调用，并且找不到相关行(按 F12 查看调试信息在控制台中).
Note that when searching for a value in column1 the search works as expected. However when searching for a value in column2 (using the same "search field"), data_table.search does not appear to be called at all and relevant rows can not be found (press F12 to see debug info in the console).
var data_table = $("#table").DataTable();
var search_term = null;
$.fn.DataTable.ext.search.push(
function(settings, row, index) {
if (search_term) {
search_term = search_term.replace(/[-/\^$*+?.()|[]{}]/g, '\$&');
search_term = search_term.toLowerCase();
}
console.log(`search_term is ${search_term}`)
var approver = $(data_table.cell(`:eq(${index})`, ':eq(0)').node()).find('.approver-select').val().toLowerCase();
console.log(`approver is ${approver}`)
var approver_match = approver.match(search_term);
console.log(`approver_match is ${approver_match}`)
var network_or_group = $(data_table.cell(`:eq(${index})`, ':eq(1)').node()).find('.network-or-group-text').val().toLowerCase();
console.log(`network_or_group is ${network_or_group}`)
var network_or_group_match = network_or_group.match(search_term);
console.log(`network_or_group_match is ${network_or_group_match}`)
console.log(`approver_match || network_or_group_match || !search_term is ${approver_match || network_or_group_match || !search_term}`)
console.log('')
console.log('')
return approver_match || network_or_group_match || !search_term;
}
);
$('#table_filter input', data_table.table().container()).on('keyup.DT cut.DT paste.DT input.DT search.DT', event => {
search_term = $(event.target).val();
data_table.draw();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table id="table">
<thead>
<th>column1</th>
<th>column2</th>
</thead>
<tbody>
<tr>
<td>
<select class="approver-select">
<option selected>user1</option>
<option>user2</option>
</select>
</td>
<td>
<input class="network-or-group-text" type="text" value="1.1.1.1/32">
</td>
</tr>
<tr>
<td>
<select class="approver-select">
<option>user1</option>
<option selected>user2</option>
</select>
</td>
<td>
<input class="network-or-group-text" type="text" value="2.2.2.0/24">
</td>
</tr>
</tbody>
</table>
</body>
<script 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">
</html>推荐答案
使用 html-input 类型更简单的方法如下.您定义目标列并在搜索时返回值.它适用于选择和输入.
A simpler way of doing it using the html-input type is as below. You define the columns you're targeting and you're returning the value upon search. It works for both the select and the input.
您不需要检查 keyup.DT cut.DT paste.DT input.DT search.DT 因为数据表也会自动为您做这件事.
You won't need to check for keyup.DT cut.DT paste.DT input.DT search.DT as datatables does that for you automatically as well.
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};
var data_table = $("#table").DataTable({
columnDefs: [{
"type": "html-input",
"targets": [0, 1]
}]
});<html>
<body>
<table id="table">
<thead>
<th>column1</th>
<th>column2</th>
</thead>
<tbody>
<tr>
<td>
<select class="approver-select">
<option selected>user1</option>
<option>user2</option>
</select>
</td>
<td>
<input class="network-or-group-text" type="text" value="1.1.1.1/32">
</td>
</tr>
<tr>
<td>
<select class="approver-select">
<option>user1</option>
<option selected>user2</option>
</select>
</td>
<td>
<input class="network-or-group-text" type="text" value="2.2.2.0/24">
</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script 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">
</html>这更简洁，并且使用数据表的基本类型属性，而不是像您现在所做的那样在搜索时过滤所有数据.
This is cleaner and uses the basic type property of datatables rather than filtering all data upon search as you're doing right now.
这篇关于修改 datatables.search 函数后的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
