iou3344
2021-10-25 17:54
采纳率: 89.7%
浏览 118
已结题

Datatables前端页面的一个难题(Server-side模式下)


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

以上代码在ajax方式读取本地json数据模式下( https://datatables.net/examples/ajax/simple.html )运行正常,但是换成Datatables的Server-side方式( https://datatables.net/examples/server_side/simple.html ) 其他都没改的情况下,唯独改了如图所示那一块后,单选和多选搜索都失效了:多选可以构造出多选框,但是勾选后点击搜索无效。单选时,点击单词选不中也搜不了,非常的郁闷~

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题