jQuery插件DataTables:如何突出显示当前搜索文本？

Question

我已经开始使用DataTables插件(v1.6.2)进行jQuery(v1.4.2),我想问你是否知道一个设置或一个插件,它允许我突出显示在过滤行上搜索文本框中使用的文本.

先感谢您

Answer 1

我不得不建议突出插件 :)

我现在在同一场景中使用它,到目前为止我没有遇到任何问题.

用法非常简单:

$("#myTable").highlight($("#searchBox").val());

只需将高亮CSS类放在样式表样式中就可以了,就是这样:

.highlight { background-color: yellow }

Answer 2

我知道这个问题已经有 6 年多了，这里的答案可能会对您提出问题时有所帮助。但对于仍在寻找此内容的人来说，有一个新插件可以将mark.js \xe2\x80\x93 和 JavaScript 关键字突出显示 \xe2\x80\x93 集成到 DataTables 中：datatables.mark.js。

\n\n

用法很简单：

\n\n

$("table").DataTables({\n    mark: true\n});\n

\n\n

这是一个示例：https://jsfiddle.net/julmot/buh9h2r8/

\n\n

这是最干净的方法，并且还为您提供了所有给定解决方案都没有提供的选项。

\n\n

现在有一篇官方 DataTables博客文章可用。

\n

Answer 3

您可以通过复制此内容来使用此功能:

jQuery.fn.dataTableExt.oApi.fnSearchHighlighting = function(oSettings) {
    oSettings.oPreviousSearch.oSearchCaches = {};       
    oSettings.oApi._fnCallbackReg( oSettings, 'aoRowCallback', function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    // Initialize search string array
    var searchStrings = [];
    var oApi = this.oApi;
    var cache = oSettings.oPreviousSearch.oSearchCaches;
    // Global search string
    // If there is a global search string, add it to the search string array
    if (oSettings.oPreviousSearch.sSearch) {
        searchStrings.push(oSettings.oPreviousSearch.sSearch);
    }
    // Individual column search option object
    // If there are individual column search strings, add them to the search string array
    if ((oSettings.aoPreSearchCols) && (oSettings.aoPreSearchCols.length > 0)) {
        for (var i in oSettings.aoPreSearchCols) {
            if (oSettings.aoPreSearchCols[i].sSearch) {
            searchStrings.push(oSettings.aoPreSearchCols[i].sSearch);
            }
        }
    }
    // Create the regex built from one or more search string and cache as necessary
    if (searchStrings.length > 0) {
        var sSregex = searchStrings.join("|");
        if (!cache[sSregex]) {
            var regRules = "("
            ,   regRulesSplit = sSregex.split(' ');

            regRules += "("+ sSregex +")";
            for(var i=0; i<regRulesSplit.length; i++) {
              regRules += "|("+ regRulesSplit[i] +")";
            }
            regRules += ")";

            // This regex will avoid in HTML matches
            cache[sSregex] = new RegExp(regRules+"(?!([^<]+)?>)", 'ig');
        }
        var regex = cache[sSregex];
    }
    // Loop through the rows/fields for matches
    jQuery('td', nRow).each( function(i) {
        // Take into account that ColVis may be in use
        var j = oApi._fnVisibleToColumnIndex( oSettings,i);
        // Only try to highlight if the cell is not empty or null
        if (aData[j]) {         
            // If there is a search string try to match
            if ((typeof sSregex !== 'undefined') && (sSregex)) {
                this.innerHTML = aData[j].replace( regex, function(matched) {
                    return "<span class='filterMatches'>"+matched+"</span>";
                });
            }
            // Otherwise reset to a clean string
            else {
                this.innerHTML = aData[j];
            }
        }
    });
    return nRow;
}, 'row-highlight');
return this;
};

里面:

dataTables.search-highlight.js

像这个例子一样调用它:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.search-highlight.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
       var oTable = $('#example').dataTable();
       oTable.fnSearchHighlighting();
    } );
</script>

并将此代码添加到您的css文件:

.filterMatches{
    background-color: #BFFF00;
}