custom option select filter

jeffrey

Anyone know how to add a custom option select filter?

Basically, like the example page below but instead of having min/max text fields... change them to select options.

http://datatables.net/examples/plug-ins/range_filtering.html

allan

What code have you tried for this? If you know what options you want to present in the select menu, then you can just put a 'change' event handler onto the select menu which will call fnFilter.

This example shows the use of select options which are dynamically built for each column, and use a change event to fire fnFilter, and might be interesting to you: http://datatables.net/examples/api/multi_filter_select.html

Allan

jeffrey

Thanks for the example page, but I don't need them dynamically built for each column. Below is an example of my code that isn't working.

[code]


$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById('min').value * 1;
var iMax = document.getElementById('max').value * 1;
var iEngines = document.getElementById('engines').value;
var iVersion = aData[3] == "-" ? 0 : aData[3]*1;
var iVersion2 = aData[3];
if ( iEngines == iVersion2 )
{
return true;
}
if ( iMin == "" && iMax == "" )
{
return true;
}
else if ( iMin == "" && iVersion < iMax )
{
return true;
}
else if ( iMin < iVersion && "" == iMax )
{
return true;
}
else if ( iMin < iVersion && iVersion < iMax )
{
return true;
}
return false;
}
);

$(document).ready(function() {
/* Initialise datatables */
var oTable = $('#example').dataTable();

/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
$('#engines select').change( function() { oTable.fnFilter( $(this).val() ); } );
} );



[/code]

And here's the html:

[code]


Minimum engine version:



Maximum engine version:






- Select -
1.8
1.9


[/code]

jeffrey

Okay, I figured out how to filter the select option. Much easier than anticipated.

[code]
$('select#engines').change( function() { oTable.fnFilter( $(this).val() ); } );
[/code]

But now I need multiple single select options that take each other into account. Is there a way to get these to work together?

Thanks.

jeffrey

Also, is there a way to take the dynamically generated select options, from the example page posted above by Allen, and place them outside of the table... perhaps in another table or div?

Basically, I don't want them in the footer or in the table at all. I need them in toggle divs that will be above the table.

jeffrey

Okay, figured it out.

[code]
$('select#engines').change( function() { oTable.fnFilter( $(this).val(), 3 ); } );
[/code]

3 is the column array number.