FixedColumns with row highlighting

keswinson

Hey,

I'm trying to highlight the entire row when someone moves their mouse over the table row. With the fixed columns we have, it breaks the highlight into the two sections, the fixed portion and the scrollable portion, and only when you mouse over that section. It is not continuous across the whole row.

Is there an easy way for it to span across the entire row all together?

ravish

Hi I am trying to highlight matched out put in datatable fixed column .i am using fnSearchHighlighting function which is working fine in normal datatable .But When I fixed some Column then Fixed Column values overrides in other column .Pl guide if any one working in highlight the matches in the column

allan

There is no easy way to do this unfortunately since they are different elements. You'd need to use a bit of Javascript to bind the elements together and set their classes appropriately.

Allan

ravish

thanks allan but highlight is working fine but some of the fixed column overlap on other column that's why I m facing this issue .

ravish

Hi Allan I when I put your code in main application It is showing javascript exception TypeError: oSettings.oApi._fnCallbackReg is not a function
[Break On This Error]

}, 'row-highlight');
I am importing all the required JS and other required things.

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
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]) {
// This regex will avoid in HTML matches
cache[sSregex] = new RegExp("("+sSregex+")(?!([^<]+)?>)", 'i');
}
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;
};
I am using above code .