我已经开始为jQuery(v1.4.2),使用DataTables插件(v1.6.2),我想问您是否知道设置或插件,这些插件允许我突出显示筛选行上搜索文本框中使用的文本。
提前谢谢你
发布于 2010-04-15 12:03:41
我不得不建议高亮插件 :)
现在,我在相同的场景中使用这个,到目前为止还没有出现任何问题。
用法非常简单:
$("#myTable").highlight($("#searchBox").val());只需将突出显示的CSS类放在您想要的样式表样式中,就可以了:
.highlight { background-color: yellow }发布于 2016-07-11 09:56:45
我知道这个问题现在已经6年多了,这里的答案可能会对你提出问题时有所帮助。但是对于那些仍在寻找这些的人来说,有一个新的插件可以将mark.js --一个JavaScript关键字高亮笔--集成到DataTables:datatables.mark.js中。
用法非常简单,如:
$("table").DataTables({
mark: true
});下面是一个例子:https://jsfiddle.net/julmot/buh9h2r8/
这是最干净的方式,也给你的选择,没有任何给定的解决方案提供给你。
现在有一个官方的DataTables 博客文章 可用。
发布于 2013-07-08 12:29:23
您可以通过处理以下内容来使用此功能:
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;
}https://stackoverflow.com/questions/2644975
复制相似问题