Table gives "No matching records found" with afnFiltering.push

plica2006

Hello,

Been using DataTables for past two weeks and love it. Every problem I've had so far I could figure out with the docs and discussion board but finally I have a problem I just can't figure out...

I'm trying to get date range filtering working. I'm trying to use the date filtering plug-in function from http://datatables.net/plug-ins/filtering#range_numbers. I am trying to include it in a .js file which has several other functions and everything has been working fine until now.

Now if I add this much of the code to my .js file and refresh the webpage to re-init and re-load the table...
[code]
$.fn.dataTableExt.afnFiltering.push();
[/code]
... the table displays fine with rows of data, tho of course it doesn't actually do the date range filtering.

However if I add in some more, just the function signature with no code in it and refresh the page again...
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ){
}
);
[/code]
... the table loads but now there are no rows of data and it says "No matching records found", even though I haven't tried to search for anything. I get the same thing when I add in all the rest of the code for that function.

I've got the DataTables Examples local on my computer and they run fine, including the number range filter example.

Any help greatly appreciated!

plica2006

I'm trying a few things but still no success, each time I reload my webpage, this also re-inits the datatable...

When I add in just an alert box and reload the page immediately on page load the alert appears and shows a count of the number of columns in the table, e.g: 3 cols and the alert flashes up the number of rows in the table.

[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ){
alert(aData.length);
}
//return true;
);
[/code]

If I uncomment the return true at the end and refresh the page then the datatable loads fine... but of course my date range filtering doesn't work. So it seems afnFiltering.push() is being called on page load and not after a keyup() in my input boxes.

With the "return true" uncommented I've also gotten a bit more behaviour by changing my listener from
[code]
$('#minDate').keyup( function() { oTable.fnDraw(); } );
[/code]

to...
[code]
$('minDate').keyup( function() { oTable.fnFilter(this.value, 8); oTable.fnDraw(); } );
[/code]

But even this way the filtering isn't working right at all. Any ideas would be very welcome!

plica2006

Problem solved!

I'm not fully sure why I was getting the problem I described. I did have errors in my code but I think it was also down to normal DataTable behaviour that I'm still trying to grapple with. For the record I want to share my Date Range Code as I noticed lots of people looking for this functionality. This is a combination of code from two Authors whose code I found on this site: guillimon and stormlifter. Thank you both!

This date range search code is for a table with a date column in the form: dd-mmm-yyyy hh:mm:ss e.g 24-Oct-2004 15:35:17 and two input text boxes, minDate and maxDate. The date search actually compares the date only, not the time portion, i.e in the form dd-mmm-yyyy. I commented the code to help explain it for novices like me. Please use it and feel free to let me know where I could improve it.

Thank you Allan and all the other contributors to DataTables for this awesome software.

[code]
$.fn.dataTableExt.afnFiltering.push(

function( oSettings, aData, iDataIndex ){

var minDate = document.getElementById('minDate').value;
var maxDate = document.getElementById('maxDate').value;
var dateColumn = 8; // <-- Find a Date Range on the End Date Column

// Strip out the dd, mmm and yyyy date strings from the input text box date. Get
// the two digit int value of the 'mmm' month. Re-arrange to form a string in
// the form yyyymmdd and then convert to an integer for easy mathematical comparison
minDate=minDate.substring(7,11) + getiMonth(minDate.substring(3,6)) + minDate.substring(0,2) * 1;
maxDate=maxDate.substring(7,11) + getiMonth(maxDate.substring(3,6)) + maxDate.substring(0,2) * 1;

// This function is called for each row in the table. Get this rows date from the
// End_Ts Date column and call getCellData() to strip out the elements inside the s
var colDate = getCellData(aData[dateColumn]);

// Remove the time stamp out of the columns date
// E.g --> 06-Mar-2011 23:45:46 --> 06-Mar-2011
colDate = colDate.substring(0,11);

// Convert the column date into an integer as above
colDate=colDate.substring(7,11) + getiMonth(colDate.substring(3,6)) + colDate.substring(0,2) * 1;

// Compare the text box min and max dates with the column date in this row.
// Return true means: Make the row with this column date visible in the dataTable.
// If the date text boxes are empty then, due to code above, their values will now be 000.
if ( minDate == 000 && 000 == maxDate){
return true;
}
else if ( minDate == 000 && colDate <= maxDate){
return true;
}
else if ( minDate <= colDate && 000 == maxDate ){
return true;
}
else if ( minDate <= colDate && colDate <= maxDate ){
return true;
}
// all failed, don't show any rows
return false;
}
);

function getiMonth(strMonth){
var arrMonths = ['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'];
var iMonth = arrMonths.indexOf(strMonth);

iMonth = iMonth+1;
if(iMonth<10){
iMonth = "0" + iMonth;
}
return String(iMonth);
}

// This function strips out additional markup you may have inside tags
// E.g. 1988 is returned from 1988
function getCellData(colData){
// This RegExp Pattern DOES work in testing but not here?! Maybe the "$1"??
// var a = colData.replace(/\n*<.*>\n*<.*>(.*)<.*>\n*\s*<.*>/,"$1");
// return a;

var str = "";
str = colData.replace('','');
str = str.replace('','');
return str;
}
[/code]