javascript - 数据表搜索突出显示，不删除 tr

Question

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

我正在使用插件 mark.js 和 datatables.mark.js plugin -Github (我目前使用的是 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”

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

我丢失了一些东西，但我不知道在哪里。

Answer 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 行:[key 内:'wrapRangeInTextNode']

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

第 991 行 [键内:'取消标记']

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;
}

此外，我需要根据特定列的值向过滤行添加多个选择，我发现了这个很棒的插件，它的作用就像一个魅力: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;
    });

希望一切都清楚并且可以帮助别人!