首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jQuery插件DataTables:如何突出当前搜索文本?

jQuery插件DataTables:如何突出当前搜索文本?
EN

Stack Overflow用户
提问于 2010-04-15 12:00:28
回答 6查看 14.3K关注 0票数 11

我已经开始为jQuery(v1.4.2),使用DataTables插件(v1.6.2),我想问您是否知道设置插件,这些插件允许我突出显示筛选行上搜索文本框中使用的文本。

提前谢谢你

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2010-04-15 12:03:41

我不得不建议高亮插件 :)

现在,我在相同的场景中使用这个,到目前为止还没有出现任何问题。

用法非常简单:

代码语言:javascript
复制
$("#myTable").highlight($("#searchBox").val());

只需将突出显示的CSS类放在您想要的样式表样式中,就可以了:

代码语言:javascript
复制
.highlight { background-color: yellow }
票数 15
EN

Stack Overflow用户

发布于 2016-07-11 09:56:45

我知道这个问题现在已经6年多了,这里的答案可能会对你提出问题时有所帮助。但是对于那些仍在寻找这些的人来说,有一个新的插件可以将mark.js --一个JavaScript关键字高亮笔--集成到DataTables:datatables.mark.js中。

用法非常简单,如:

代码语言:javascript
复制
$("table").DataTables({
    mark: true
});

下面是一个例子:https://jsfiddle.net/julmot/buh9h2r8/

这是最干净的方式,也给你的选择,没有任何给定的解决方案提供给你。

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

票数 7
EN

Stack Overflow用户

发布于 2013-07-08 12:29:23

您可以通过处理以下内容来使用此功能:

代码语言:javascript
复制
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

一个类似于这个例子的调用:

代码语言:javascript
复制
<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文件中:

代码语言:javascript
复制
.filterMatches{
    background-color: #BFFF00;
}
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2644975

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档