jQuery插件DataTables：如何突出显示当前搜索文本？
我已经开始使用DataTables插件（v1.6.2）用于jQuery （v1.4.2），我想问你是否知道一个设置或插件 ，它允许我突出显示在过滤行上搜索文本框中使用的文本。
先感谢您
我不得不建议突出插件 🙂
我现在正在使用相同的场景，到目前为止我没有遇到任何问题。
用法非常简单：
$("#myTable").highlight($("#searchBox").val()); 只需将高亮CSS类放在样式表样式中就可以了，就是这样：
.highlight { background-color: yellow }
你可以通过复制这个内容来使用这个function：
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)", '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 ""+matched+""; }); } // Otherwise reset to a clean string else { this.innerHTML = aData[j]; } } }); return nRow; }, 'row-highlight'); return this; };
里面：
dataTables.search-highlight.js
像这个例子一样调用它：
并将此代码添加到您的css文件：
.filterMatches{ background-color: #BFFF00; }
我知道这个问题已经超过6年了，这里的答案可能会在你提问时帮助你。 但对于仍在搜索此问题的人来说，有一个新的插件可以将mark.js （JavaScript关键字荧光笔）集成到DataTables： datatables.mark.js中 。
用法很简单：
$("table").DataTables({ mark: true });
这是一个例子： https ： //jsfiddle.net/julmot/buh9h2r8/
这是最干净的方式，也为您提供了无法提供给定解决方案的选项。
现在有一个官方DataTables 博客文章可用。
您可以使用以下添加
jQuery.fn.dataTableExt.oApi.fnSearchHighlighting = function(oSettings) { // Initialize regex cache 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 // searchTxt=($('#filter_input input[type="text"]')?$('#filter_input input[type="text"]').val():""); var searchTxt = $('input[type="search"]').val(); // console.log("txt" + searchTxt); if ((oSettings.aoPreSearchCols) && (oSettings.aoPreSearchCols.length > 0)) { for (var i in oSettings.aoPreSearchCols) { if (oSettings.aoPreSearchCols[i].sSearch) { searchStrings.push(searchTxt); } } } // 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]) { // This regex will avoid in HTML matches cache[sSregex] = new RegExp("("+escapeRegExpSpecialChars(sSregex)+")(?!([^<]+)?>)", 'i'); } var regex = cache[sSregex]; }*/ if (searchStrings.length > 0) { var sSregex = searchStrings.join("|"); if (!cache[sSregex]) { var regRules = "(" , regRulesSplit = sSregex.split(' '); regRules += "("+ sSregex +")"; for(var i=0; i)", '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 // console.log("data "+ aData[j] + " j " + j); // console.log("data 1 "+ nRow); if (aData) { // If there is a search string try to match if ((typeof sSregex !== 'undefined') && (sSregex)) { //console.log("here :: "+$(this).text()); this.innerHTML = $(this).text().replace( regex, function(matched) { return ""+matched+""; }); } // Otherwise reset to a clean string else { this.innerHTML = $(this).text();//aData[j]; } } }); return nRow; }, 'row-highlight'); return this; };
这个解决方案对我有用。 注意：目前它不支持单个列过滤，但您只需在代码中取消注释。
searchTxt=($('#filter_input input[type="text"]')?$('#filter_input input[type="text"]').val():"");
我用datatables 1.10.2和jquery 1.9.2版测试了这个。
此附加function具有突出显示搜索文本的更好function。 如果您在对话框中创建了数据表，那么在对话框重新打开时，您需要重新初始化数据表。
在DatatableHighlighter.js中
jQuery.fn.dataTableExt.oApi.fnSearchHighlighting = function(oSettings) { // Initialize regex cache 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 // searchTxt=($('#filter_input input[type="text"]')?$('#filter_input input[type="text"]').val():""); var searchTxt = $('input[type="search"]').val(); // console.log("txt" + searchTxt); if ((oSettings.aoPreSearchCols) && (oSettings.aoPreSearchCols.length > 0)) { for (var i in oSettings.aoPreSearchCols) { if (oSettings.aoPreSearchCols[i].sSearch) { searchStrings.push(searchTxt); } } } // 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)", 'ig'); //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); if (aData) { // If there is a search string try to match if ((typeof sSregex !== 'undefined') && (sSregex)) { //For removing previous added var element = $(this);//convert string to JQuery element element.find("span").each(function(index) { var text = $(this).text();//get span content $(this).replaceWith(text);//replace all span with just content }).remove(); var newString = element.html();//get back new string this.innerHTML = newString.replace( regex, function(matched) { return ""+matched+""; }); } // Otherwise reset to a clean string else { //For removing previous added var element = $(this);//convert string to JQuery element element.find("span").each(function(index) { var text = $(this).text();//get span content $(this).replaceWith(text);//replace all span with just content }).remove(); var newString = element.html(); this.innerHTML = newString;//$(this).html()//$(this).text(); } } }); return nRow; }, 'row-highlight'); return this; };
并称之为……
$("#button").click(function() { dTable = $('#infoTable').dataTable({"bPaginate": false,"bInfo" : false,"bFilter": true,"bSort":false, "autoWidth": false,"destroy": true, "columnDefs": [ { "width": "35%", "targets": 0 }, { "width": "65%", "targets": 1 } ]}); $(".dataTables_filter input[type='search']").val(''); $("span[class='filterMatches']").contents().unwrap(); dTable.fnSearchHighlighting(); $("span[class='filterMatches']").contents().unwrap(); $("#AboutDialog").dialog('open'); });