How to add filterable radio buttons

Jagst3r21

Hi Allan,

Thanks for your previous answer to a question I had a few days ago. DataTables is awesome. I am creating a table ( http://jagst3r15.com/scholarships360/table-of-scholarships/ ) but am wondering how I would add a box like on http://clanfinder.net/clan/?submit=Set+Filters where you can set filterable radio buttons. Could you point me in the right direction? I am not a novice with JS/jQuery, but am not even intermediate so any help is appreciated. I have a few other questions, but will keep it to this for now or else I'll get overwhelmed.

Thanks a bunch,

James

Jagst3r21

Sorry if I am not supposed to bump.

girishmr

Yes you can.
Option 1 - Wrap all the filters in a div and warp it in a form. On submit, validate the truth value of filters and call your script to load data to the table.

Option 2: Instead of a div, you can use table wrapped inside a form. The validation part remains the same

Table initialization is very much the same as shown in the examples - http://datatables.net/release-datatables/examples/basic_init/zero_config.html.

For additional feature enablement see the link in example page

Use fnFilter options during initialization

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers"
// any additional features you may want
} );

oTable.fnFilter( '', 1, true );
// additional filters you may want
} );
[/code]

Hope it helps.

Jagst3r21

I'll test this out. Thanks a bunch mate :)

Jagst3r21

Unfortunatley I cant seem to get it working, I added the part like you said and then have

[code]


Amount:

$1,000

$500

$10,000




[/code]

Is the problem that you cant filter an amount like that with the dollar sign?

allan

How are you running the filter? The code from girishmr above shows a static filter - have you put it into a 'change' event handler for your filters, which would be needed here? i.e. basically when there is a click on the checkbox it would trigger the filter.

Allan

girishmr

Oh yeah what I meant by

[quote]
On submit, validate the truth value
[/quote]

is to bind a change event. Sorry I should have explained it more clearly.

Jagst3r21

Hi, I am having a little trouble with this. I really am not looking for someone to give me the answer, i'm just a bit confused. I know I haven't entered the data in yet, but it's just a test site. I am trying to make it so you can filter from a range of dollar amounts and/or 1) show scholarships that end within 30 days, 60 days, or filter out all scholarships if they are before the current date. The scholarships are also either marked in the scholarships , highschool, college, and/or graduate categories. Some scholarships have multiple categories like highschool AND college so I am not sure how I'd display that in the table. As you can see, I have everything pretty much planed, but I am not sure how to implement it, even after your kind help above. Here is what I have so far. The html/php:

[code]



Amount:

$1 to $500

$501 to $2,500

$2,500 to $10,000

$10,001 +













Scholarship
Amount
Ending



<?php $posts = get_posts('category=6&numberposts=-1');
foreach($posts as $post) { $title = get_the_title();?>

<?php echo ($title); ?>
<?php $amount = get_post_meta($post->ID, 'Amount', true); ?><?php echo $amount; ?>
<?php $ending = get_post_meta($post->ID, 'Ending', true); ?><?php echo $ending; ?>

<?php } ?>


[/code]

The JavaScript:

[code]
jQuery(document).ready(function($) {
var oTable = $('#scholarships').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 50,
"oLanguage": {
"sLengthMenu": 'Display '+
'50'+
'100'+
'All'+
' scholarships'
}

} );
oTable.fnFilter( '', 1, true );
// This has broken the script, my fault probably :)

} );

/* Add drop-down indicators to all menu items with a sub menu */
$( 'div.menu li:has(ul.sub-menu) > a' ).addClass( 'with-ul' ).append( '»' );

$( '#menu-primary-title' ).click(function() {
$( '#menu-primary .menu' ).toggleClass( 'visible' );
});

} );

[/code]

I appreciate your help!

- James

Jagst3r21

Any ideas guys? Sorry to bump this.

allan

I'd say without doubt you'll need a custom filter for this:

Docs: http://datatables.net/development/filtering
Example: http://datatables.net/release-datatables/examples/plug-ins/range_filtering.html

Indeed you might need multiple custom filters - one for the range, one for the days etc. I'd suggest one filter for each independently filterable data source (the more you can keep them individually filtered the easier it will be).

Allan

Jagst3r21

I'll try to figure this out this afternoon. Thanks a bunch Allan :)

Jagst3r21

Thanks Allan, I got a bit confused so just decided to add searchable rows for now - I can't figure out how to search ranges yet. I noticed one odd thing, how come the amount doesn't sort correctly when you click on the little carrot in the amount header. It goes from 2,500 to 150,000. Any ideas? Here is the live example http://jagst3r15.com/scholarships360/table-of-scholarships/

- James

P.S. When I say it doesn't work properly it is my fault not yours. Excuse my noob-ness :)

allan

> 2,500

Because it has non-numeric data in it - i.e. the comma. If you want to sort that numerically, you need to use a sorting plug-ins such as this one: http://datatables.net/plug-ins/sorting#formatted_numbers .

Allan

Jagst3r21

Hmm, I added this below the initialization code [code] jQuery.fn.dataTableExt.oSort['numeric-comma-asc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
var y = (b == "-") ? 0 : b.replace( /,/, "." );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['numeric-comma-desc'] = function(a,b) {
var x = (a == "-") ? 0 : a.replace( /,/, "." );
var y = (b == "-") ? 0 : b.replace( /,/, "." );
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};[/code]

and then this so my initialization code looks like this now [code]jQuery(document).ready(function($) {
var oTable = $('#scholarships').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Search all columns:"
}
"aoColumns": [
null,
null,
null,
{ "sType": "numeric-comma" },
null
]
} );[/code]

There are no runtime errors, but it does not sort properly. Am I doing something wrong here?

Thanks for all the help, I know it must be annoying to help noobs sometimes, but it is appreciated :)