iou3344 2021-09-10 20:28 采纳率: 85.2%
浏览 175
已结题

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

涉及框架:


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

img

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

img

(本地调试需要放到127.0.0.1下跑,需要源代码的请私信我,我发给您!谢谢!)

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-09-10 20:50
    关注

    大概如下,由于多选的话没法判断用户是否已经选择完毕,需要使用按钮来实现查询功能,有帮助记得点个采纳,谢谢~

    img

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏

报告相同问题?

问题事件

  • 系统已结题 9月19日
  • 已采纳回答 9月11日
  • 创建了问题 9月10日

悬赏问题

  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 树莓派控制机械臂传输命令报错,显示摄像头不存在
  • ¥15 前端echarts坐标轴问题
  • ¥15 CMFCPropertyPage
  • ¥15 ad5933的I2C
  • ¥15 请问RTX4060的笔记本电脑可以训练yolov5模型吗?
  • ¥15 数学建模求思路及代码
  • ¥50 silvaco GaN HEMT有栅极场板的击穿电压仿真问题
  • ¥15 谁会P4语言啊,我想请教一下
  • ¥15 这个怎么改成直流激励源给加热电阻提供5a电流呀