Filter post-processing and highlighting

luchopintado

put an "onComplete" handler ...
[code]
...
"fnServerData": function(sSource,aoData,fnCallback) {
aoData.push( { "name": "name", "value": "value" } );
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback,
"complete":function(){
$filtro = $('.dataTables_filter input');
if ($filtro.val().length < 3) return;
$('#listado_alumnos').highlight($filtro.val());
}
} );
},
...
[/code]

on datatable config

Chad

may i know how to highlight empty cells with some background color

here is the code i am trying:

[code]
dataSave = function() {
var aRowIndexes = new Array();
for(var i = 0; i < RowSize; i++){ aRowData = aoTable.fnGetData(aRowIndexes[i]); var testColumns = aRowData[i].toString().trim().split(','); for ( var j = 0; j < testColumns.length; j++) { if(testColumns[j].blank()){ alert("Invalid Data at Row : "+(i+1)+" Column:"+(j+1));
}
}
[/code]

Thanks in Advance

}

vivekmyself

Hi This script works in datatable 1.8 its not working in new datatable 1.9. How to make work in 1.9?

Thank you

allan

Have a look at this thread: http://datatables.net/forums/discussion/8370/upgrading-from-1.8-1.9-issues/p1

Allan

jp_noronha

plugin highlight corrected to 1.9:

[code]
/*
* This source file is free software, under either the GPL v2 license or a
* BSD style license, as supplied with this software.
*
* This source file is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE.
* Parameters:
*/
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
$('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;
};
[/code]

please check if you have de necessary css code
[code]
/*
SearchHighlighting
*/
.filterMatches
{
background-color: #BFFF00;
}
[/code]

Joao Noronha

olragon

Joao Noronha's version + improve highlight search terms

Have a look at this image: http://i.minus.com/iZyjtkGrrrPmg.png

[code]
// HIGHLIGHT FCT
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]) {
var regRules = "("
, regRulesSplit = sSregex.split(' ');

regRules += "("+ sSregex +")";
for(var i=0; i

jp_noronha

thanks olragon
but i must say it is not mine, someone else is due the original code (i confess not to remember who), my contribuition was small.

Lucho_1312

Hello!

First, I'll like to thanks everyone here that share all the knowledge, and special thanks to the creator of DataTables.

I've used DataTables before, but I never used plugins like this one, and I'm having some problems trying to implemento this highlighting function. I have the 1.9v and I'm using server-side procesing, DataTables filtering API example and MultiFilter.

My code is something like this:

[code]

var asInitVals = new Array();

function fnFilterGlobal ()
{
$('#example').dataTable().fnFilter(
$("#global_filter").val(),
null,
$("#global_regex")[0].checked,
$("#global_smart")[0].checked
);
}

function fnFilterColumn ( i )
{
$('#example').dataTable().fnFilter(
$("#col"+(i+1)+"_filter").val(),
i,
$("#col"+(i+1)+"_regex")[0].checked,
$("#col"+(i+1)+"_smart")[0].checked
);
}

$(document).ready(function() {
var oTable = $('#example').dataTable( {
"iDisplayLength": 10,
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"oLanguage": {
"sSearch": "Search all columns:",
// "sProcessing": ""
"sProcessing": "Buscando resultados..."

}
} );

oTable.fnSearchHighlighting();

$("#global_filter").keyup( fnFilterGlobal );
$("#global_regex").click( fnFilterGlobal );
$("#global_smart").click( fnFilterGlobal );

$("#col1_filter").keyup( function() { fnFilterColumn( 0 ); } );
$("#col1_regex").click( function() { fnFilterColumn( 0 ); } );
$("#col1_smart").click( function() { fnFilterColumn( 0 ); } );

$("#col2_filter").keyup( function() { fnFilterColumn( 1 ); } );
$("#col2_regex").click( function() { fnFilterColumn( 1 ); } );
$("#col2_smart").click( function() { fnFilterColumn( 1 ); } );

$("#col3_filter").keyup( function() { fnFilterColumn( 2 ); } );
$("#col3_regex").click( function() { fnFilterColumn( 2 ); } );
$("#col3_smart").click( function() { fnFilterColumn( 2 ); } );

$("#col4_filter").keyup( function() { fnFilterColumn( 3 ); } );
$("#col4_regex").click( function() { fnFilterColumn( 3 ); } );
$("#col4_smart").click( function() { fnFilterColumn( 3 ); } );

$("#col5_filter").keyup( function() { fnFilterColumn( 4 ); } );
$("#col5_regex").click( function() { fnFilterColumn( 4 ); } );
$("#col5_smart").click( function() { fnFilterColumn( 4 ); } );


$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );

} );


[/code]

I also have the version of the script that olragon posted above, before the tag.

The problem is that it simply doesn't work! =(
I also added the css style, but nothing happens... Does someone know what's the problem?

Thanks in advance!!
Cheers,
Luciano