呦西震惊--AamazeUIDatabales搜索框中关键字与搜索内容高亮显示

你的名字 2021-07-04 20:46 387阅读 0赞

第一引入jquery.highlight.js文件，切记路径要正确。

下面是j该js文件

/* * jQuery Highlight plugin * * Based on highlight v3 by Johann Burkard * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html * * Code a little bit refactored and cleaned (in my humble opinion). * Most important changes: * - has an option to highlight only entire words (wordsOnly - false by default), * - has an option to be case sensitive (caseSensitive - false by default) * - highlight element tag and class names can be specified in options * * Usage: * // wrap every occurrance of text 'lorem' in content * // with <span class='highlight'> (default options) * $('#content').highlight('lorem'); * * // search for and highlight more terms at once * // so you can save some time on traversing DOM * $('#content').highlight(['lorem', 'ipsum']); * $('#content').highlight('lorem ipsum'); * * // search only for entire word 'lorem' * $('#content').highlight('lorem', { wordsOnly: true }); * * // don't ignore case during search of term 'lorem' * $('#content').highlight('lorem', { caseSensitive: true }); * * // wrap every occurrance of term 'ipsum' in content * // with <em class='important'> * $('#content').highlight('ipsum', { element: 'em', className: 'important' }); * * // remove default highlight * $('#content').unhighlight(); * * // remove custom highlight * $('#content').unhighlight({ element: 'em', className: 'important' }); * * * Copyright (c) 2009 Bartek Szopka * * Licensed under MIT license. * */
    
    jQuery.extend({ 
        highlight: function (node, re, nodeName, className) { 
            if (node.nodeType === 3) { 
                var match = node.data.match(re);
                if (match) { 
                    var highlight = document.createElement(nodeName || 'span');
                    highlight.className = className || 'highlight';
                    var wordNode = node.splitText(match.index);
                    wordNode.splitText(match[0].length);
                    var wordClone = wordNode.cloneNode(true);
                    highlight.appendChild(wordClone);
                    wordNode.parentNode.replaceChild(highlight, wordNode);
                    return 1; //skip added node in parent
                }
            } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                    !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                    !(node.tagName === nodeName.toUpperCase() && node.className === className)) {  // skip if already highlighted
                for (var i = 0; i < node.childNodes.length; i++) { 
                    i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
                }
            }
            return 0;
        }
    });
    
    jQuery.fn.unhighlight = function (options) { 
        var settings = {  className: 'highlight', element: 'span' };
        jQuery.extend(settings, options);
    
        return this.find(settings.element + "." + settings.className).each(function () { 
            var parent = this.parentNode;
            parent.replaceChild(this.firstChild, this);
            parent.normalize();
        }).end();
    };
    
    jQuery.fn.highlight = function (words, options) { 
        var settings = {  className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
        jQuery.extend(settings, options);
        
        if (words.constructor === String) { 
            words = [words];
        }
        words = jQuery.grep(words, function(word, i){ 
          return word != '';
        });
        words = jQuery.map(words, function(word, i) { 
          return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
        });
        if (words.length == 0) {  return this; };
    
        var flag = settings.caseSensitive ? "" : "i";
        var pattern = "(" + words.join("|") + ")";
        if (settings.wordsOnly) { 
            pattern = "\\b" + pattern + "\\b";
        }
        var re = new RegExp(pattern, flag);
        
        return this.each(function () { 
            jQuery.highlight(this, re, settings.element, settings.className);
        });
    };

第二在页面中

$(document).ready( function () { 
        //需要高亮的那个表格id
        var table = $('#myTable').DataTable();
    
        // 重绘表格
        table.on( 'draw', function () { 
            //获得需要高亮的容器部分
            var body = $( table.table().body() );
            //如果之前有高亮把高亮部分去掉
            body.unhighlight();
            //根据搜索框里的关键字 高亮显示
            body.highlight( table.search() );
        } );
    } );
    
    // css 需要自己定义
    <style>
    //设置高亮颜色
    .highlight { background-color: yellow;}
    </style

最后点个赞~