datatables的一个特殊需求，请熟悉datatables的朋友接单哈。
需求如下上图标识和文字说明所述！
（本地调试需要放到127.0.0.1下跑，需要源代码的请私信我，我发给您！谢谢！）
大概如下，由于多选的话没法判断用户是否已经选择完毕，需要使用按钮来实现查询功能，有帮助记得点个采纳，谢谢~
2021-9-11 14:01代码更新
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<style>
#dvType {
text-align: center;
font-weight: bold;
line-height: 50px;
}
.r{color:#f00}
</style>
<div id="dvType">单选或多选：<input type="radio" name="type" value="0" />重置 <input type="radio" name="type" value="1" />单选搜索 <input type="radio" name="type" value="2" />多选搜索 <input type="button" id="btnMul" style="display:none" value="开始搜索" /></div>
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var eg = $('#example'), searchBox, type = '0', keywords,
searchCols = [0, 1, 2]//要要处理的列下标，从0开始，0表示第一列，1第二列，依次类推
;
var $dt = eg.DataTable({
"ajax": "data.txt",
initComplete: function (settings, json) {//加载完毕事件
eg.after($('#dvType'));//插入搜索类型
searchBox = eg.prev().find('input');
/*searchBox.unbind('')//解绑所有事件
.bind('input', function () {//添加自定义事件
btnMul.trigger('click',true);//触发多选按钮搜索，支持正则
});*/
},
rowCallback: function (row) {//关键字高亮
row = $(row);
row.find('span.r').removeClass('r');
if (type == '2' || type == '0') {
row.find(':checkbox' + (type == '0' ? ',span.single' : '')).parent().html(function () { return this.innerText })
}
else {
if (!row.find('span.single').length) {//这行没有格式化过，需要重新格式化
row.find('td').html(function () {
var cellIndex = this.cellIndex;
if (searchCols.findIndex(function (v) { return v == cellIndex }) == -1) return true;//不包含处理的列退出
return this.innerText.split(' ').map(function (i) {
if (i) return '<span class="single">' + i + '</span>'
return ''
}).join(' ');
});
}
}
//高亮操作
if (keywords) {
var re = new RegExp('(' + keywords.split(' ').join('|') + ')', 'ig');
row.find('td').each(function () {
var cellIndex = this.cellIndex;
if (searchCols.findIndex(function (v) { return v == cellIndex }) == -1) return true;//不包含处理的列退出
if (type == '1') $('span', this).each(function () {
if (re.test(this.innerText))this.classList.add('r')
});
else this.innerHTML = this.innerText.replace(re,'<span class=r>$1</span>')
});
}
}
});
eg.on('click', 'span.single', function () {
searchBox.val(this.innerHTML);//执行搜索
btnMul.trigger('click', true);
}).on('click', ':checkbox', function () {
var s = searchBox.val();
if (this.checked) s += (s ? ' ' : '') + this.value;
else s = s.replace(' ' + this.value, '').replace(this.value + ' ', '');
searchBox.val($.trim(s));
});
var btnMul = $('#btnMul');
btnMul.click(function () {////多选只能通过按钮来触发，要不无法知道用户是否已经选择完所有关键字
var s = searchBox.val();
keywords = s;
searchBox.trigger('input');
});
$('#dvType :radio').click(function () {
type = this.value;
if (type == '0') {
searchBox.val(keywords = '');
$dt.search('').draw();
return;
}
$('#btnMul')[type == '2' ? 'show' : 'hide']();
eg.find('tbody td').each(function () {
var cellIndex = this.cellIndex;
if (searchCols.findIndex(function (v) { return v == cellIndex }) == -1) return true;//不包含处理的列退出
this.innerHTML = this.innerText.split(' ').map(function (i) {
if (i) return type == 1 ? '<span class="single">' + i + '</span>' : '<input type="checkbox" value="'+i.replace(/"/g,'"')+'"/>' + i
return ''
}).join(' ');
});
});
});
</script>