<!DOCTYPE html>
<html lang="en-US">
<head>
<title>ajax_demo</title>
<meta charset="utf-8">
</head>
<body>
<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');
},
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').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 '<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>
以上代码在ajax方式读取本地json数据模式下（ https://datatables.net/examples/ajax/simple.html ）运行正常，但是换成Datatables的Server-side方式（ https://datatables.net/examples/server_side/simple.html ） 其他都没改的情况下，唯独改了如图所示那一块后，单选和多选搜索都失效了：多选可以构造出多选框，但是勾选后点击搜索无效。单选时，点击单词选不中也搜不了，非常的郁闷～
