没有 tr 删除的 DataTables 搜索突出显示答案

【问题标题】：DataTables search highlight with no tr remove没有 tr 删除的 DataTables 搜索突出显示
【发布时间】：2018-07-26 11:43:03
【问题描述】：

我正在尝试更改 DataTables 搜索的默认行为，但没有成功。

我正在使用带有 datatables.mark.js plugin - Github 的插件 mark.js（我目前使用的是 DataTables 1.10.12）。

我只想突出显示带有结果的行，而不是删除所有不匹配的行。

我注意到在函数 _fnDraw 内部，它获取包含匹配项的数组。

所以我试着像这样改变那部分：

function _fnDraw( oSettings )
{
    /* I just changed the following lines */
    // var aiDisplay = oSettings.aiDisplay;
    var aiDisplay = oSettings.aiDisplayMaster;

我还注意到 fnDisplayEnd 函数用于对需要打印的行设置限制。

"fnDisplayEnd": function ()
    {
        var
            /* I just changed the following lines */
            //records  = this.aiDisplay.length,
            records  = this.aiDisplayMaster.length,

但是这样做，代码会在另一点中断：

_api_register( 'rows().nodes()', function () {
    return this.iterator( 'row', function ( settings, row ) {
        return settings.aoData[ row ].nTr || undefined;
    }, 1 );
} );

出现以下错误： 未捕获的类型错误：无法读取未定义的属性“nTr”

其中 row 包含从搜索中获得的匹配项

我错过了一些东西，但我不知道在哪里。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

我将它们包装成 _fnDraw 内的代码行

body.children().detach();
body.append( $(anRows) );

导致：

 if(oSettings.aiDisplay.length == oSettings.aiDisplayMaster.length){
    body.children().detach();
    body.append( $(anRows) );
}

因为 oSettings.aiDisplay 包含与搜索匹配的行数组，而 oSettings.aiDisplayMaster 包含整个表格行。

更新

为了实现这一点，我还隐藏了默认搜索：

dataTables_filter {
    display:none;
}

让 mark.js 让脏东西，创建一个新的输入字段：

HTML：

<input id="markJsSearch" type="search" placeholder="New Custom Search">

JS：

  $input.on("input", function() {
    var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  });

参考：Fiddle

然后我修改了 markjs 插件（mark.js v8.11.1 - 不是 min），以便在 tr 中添加一个 CSS 类，以突出显示它：

第 727 行：[在 键中：'wrapRangeInTextNode']

jQuery(node).parents('tr').addClass('highlight');

第 991 行 [在 key: 'unmark' 内]

jQuery(node).parents('tr').removeClass('highlight');

我添加了以下 CSS：

table tbody tr.highlight td {
    background: #4e98fe;
    color: #fff;
}

并隐藏 mark.js 默认样式：

mark {
    background: transparent;
    color: #fff;
    padding: 0;
}

此外，我需要根据某一列的值向 filter 行添加多个选择，我发现了这个很棒的插件，它的工作原理就像一个魅力：Yet Another DataTables Column Filter 谢谢！

为了让它与 mark.js 技巧一起工作，它基本上不会重绘表格，我添加了一个名为 multiSearch 的全局变量，如果触发了多重选择，它会让表格重绘。

我创造了：

var multiSearch = true;

我像这样更改了 DataTables 插件：

if((oSettings.aiDisplay.length == oSettings.aiDisplayMaster.length && !multiSearch)){
    body.children().detach();
    body.append( $(anRows) );
} else if(multiSearch) {
    body.children().detach();
    body.append( $(anRows) );
}

并添加：

 $('body').on('click focus','#markJsSearch',function(){
        multiSearch = false;
    }).on('blur','#markJsSearch',function(){
        multiSearch = true;
    });

希望一切都清楚，这可以帮助某人！

【讨论】：