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

出现以下错误： 未捕获的TypeError：无法读取属性＆＃39; nTr＆＃39;未定义的

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

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

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 - not min）以便为tr添加一个CSS类，以突出显示它：

第727行：[在键内：＆＃39; wrapRangeInTextNode＆＃39; ]

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

第991行[在键内：＆＃39; unmark＆＃39; ]

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

此外，我需要添加多个select到过滤器行，基于某个列的值，我发现了这个非常棒的插件，它就像一个魅力：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;
    });

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

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

1 个答案: