当列的内容不是文本时，我尝试通过 select 过滤数据表列 status。
到目前为止我已经尝试过:
基本上我尝试以这种方式使用搜索引擎:
$('#search2').on('change', () =>
{
DT1.search($('#search2').val()).draw();
});
但是很明显，如果我们将字符串与“彩色方 block ”进行比较，则不会有结果。
如何才能做到，如果用户选择“事件”，则仅显示绿色方 block ，如果用户选择“非事件”，则仅显示红色方 block ？
任何帮助将不胜感激
最佳答案
这不是我在深夜匆忙写作的最佳方式，尽管我认为我会提供一个可行的解决方案，以防其他人这样做。
$(document).ready(function() {
var DT1 = $('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
dom: 'lrt'
});
$(".selectAll").on("click", function(e) {
if ($(this).is(":checked")) {
DT1.rows().select();
} else {
DT1.rows().deselect();
}
});
$('#search').on('input', () => {
DT1.search($('#search').val()).draw();
});
$('#search2').on('change', () => {
const state = $("#search2").val();
if (state === "none") {
$(".status-active").parent().parent().attr("hidden", false);
$(".status-inactive").parent().parent().attr("hidden", false);
return;
}
$(".status-" + ((state === "active") ? 'inactive' : 'active')).parent().parent().attr("hidden", true);
$(".status-" + state).parent().parent().attr("hidden", false);
});
});body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
.status-active {
height: 25px;
width: 25px;
background-color: #385C0B;
margin: 0 auto;
}
.status-inactive {
height: 25px;
width: 25px;
background-color: #CC000C;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="stackoverflow" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f1fcfce7e0e7e1f2e3d3a6bda2bda3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161140f100f11" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="form-inline">
<input id="search" title="Search" placeholder="Search" class="filter-input form-control form-control-sm m-2" type="text" name="filter-project" value="">
<select id="search2" name="expense_category" class="form-control form-control-sm m-2">
<option value="none">Select a Status</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
</select>
</div>
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th class="text-center"><input type="checkbox" class="selectAll" name="selectAll" value="all"></th>
<th>Name</th>
<th>Status</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>
<div class="status-active" title="Active"></div>
</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>
<div class="status-active" title="Active"></div>
</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Donna Snider</td>
<td>
<div class="status-inactive"></div>
</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>说明
我们主要关注状态下拉列表更改时的事件处理程序。
$('#search2').on('change', () =>
{
const state = $("#search2").val();
if (state === "none") {
$(".status-active").parent().parent().attr("hidden", false);
$(".status-inactive").parent().parent().attr("hidden", false);
return;
}
$(".status-" + ((state === "active") ? 'inactive' : 'active')).parent().parent().attr("hidden", true);
$(".status-" + state).parent().parent().attr("hidden", false);
});
首先，我们通过 .val() 获取选择的值来获取下拉菜单的状态以及所选择的内容。 ，这将为我们提供 active , inactive ，或none 。 (我对 HTML 下拉列表进行了必要的调整以添加这些值。)
有了这些信息，我们就知道需要执行什么类型的过滤。
更新状态
如果未选择任何状态 ( none )，则我们通过获取类 .status-active 的每个元素来取消隐藏所有行。和.status-inactive ，这是通过以下方式完成的:
$(".status-active").parent().parent().attr("hidden", false);
$(".status-active")获取具有事件类的所有行，并获取父级的父级，该父级为我们提供了行元素本身，并设置 hidden属性为false ，使其可见。
过滤事件/非事件
这是实际执行过滤的代码:
$(".status-" + ((state === "active") ? 'inactive' : 'active')).parent().parent().attr("hidden", true);
$(".status-" + state).parent().parent().attr("hidden", false);
仔细检查第一行，有一个 ternary operator它检查 state 是否等于active ，在这种情况下，如果是，它将输出 inactive ，反之亦然，这样做的目的是选择相反类属性，以便我们可以隐藏它。
第二行只是获取具有所选状态的所有行，并使它们可见。
关于javascript - 当选择更改时如何对数据表进行非文本搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70241827/