datatables的一个特殊需求，请熟悉datatables的朋友接单哈。

Question

涉及框架：

DataTables examples - Examples index https://datatables.net/examples/index

需求如下上图标识和文字说明所述！

请围绕datatables的官方代码为例：通过后台txt加载数据的方式。具体使用的是这个例子：

DataTables example - Ajax data source (arrays) https://datatables.net/examples/ajax/simple.html

（本地调试需要放到127.0.0.1下跑，需要源代码的请私信我，我发给您！谢谢！）

Answer 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,'&quot;')+'"/>' + i
                    return ''
                }).join(' ');
            });
        });
    });
</script>