checkboxes as filters

Joy

how do i add check boxes in filters ..?

Joy

i have tried the non Jquery ones(i have done many) but they are all slow in response and they dont look good.It would be better if i can get a checkbox type dropdown instead of a single option select type.. Any help would be appreciated.. thanks in advance :)

allan

Hi Joy,

I'm afraid I don't quite 100% understand what you are looking for. Do you mean you basically want a select list with checkboxes in it, which is driving the filtering options? Something visually like what ColVis does ( http://datatables.net/extras/colvis )? If so, all you need to do is bind a jQuery event handler to the checkbox and call fnFilter() will the required filtering parameters on your table.

Allan

Joy

Hi Allan,

You are right i would have to say its the first one .I want "a select list with checkboxes in it, which is driving the filtering options".

I have seen one in the below link.I need the ones in the third col,but only jqueries..

Link : http://tablefilter.free.fr/load-filters-on-demand.htm

allan

I see - I'm afraid that there isn't currently a widget to do exactly that for DataTables. There is the column filtering plug-in: http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html . That does provide easy column filtering options, but it doesn't provide a control quite like what you are looking for. I'm sure it can be added to the column filter if you wanted to do that. If you'd like me to take a look I can send you a quote.

Regards,
Allan

Joy

Thanks a lot Allan for the link.It would be very helpful if you could think of something.

Sean

Hello allan

Following your comment:

[quote]allan said: Hi Joy,

I'm afraid I don't quite 100% understand what you are looking for. Do you mean you basically want a select list with checkboxes in it, which is driving the filtering options? Something visually like what ColVis does (http://datatables.net/extras/colvis )? If so, all you need to do is bind a jQuery event handler to the checkbox and call fnFilter() will the required filtering parameters on your table.

Allan [/quote]

Could you please explain how I could bind it and the sort of code will have to use, because this exactly what I need but new to all this. Basically trying to produce similar results as this website (http://www.mylondonclubs.com/finder.php) where can whittle the results down using check boxes .

Thanks :-)

jcrawford

I cant show an example of a drop down with checkboxes in it however if you used the jquery component I am sure it has change events etc you could use. If you can create a function and tell the jquery plugin to execute this function for the click event then you could write some custom JS to take care of this.

I just went through this with a project where I have form fields outside the data table and when you select different values from a drop down the table is filtered.

To do this I just created my form above my table. I then bound events to the form elements such as below:

[code]
function buildAjaxSourceUrlBasedOnFormSelections() {
var dateField = $("#datepicker").val();
var transaction_code = $("#transactionCodes").val();
var resource = $("input[@name=radio]:checked").attr('id');

var newSource = '/admin/pstoolresourceajax/?resource=' + resource;

if(dateField.length > 10) {
/* we have a range we need to split */
var startDate = dateField.substring(0, dateField.indexOf(' - '));
var endDate = dateField.substring(dateField.indexOf(' - ')+3, dateField.length);
newSource += '&start_date='+startDate+'&end_date='+endDate;

} else if(dateField.length > 0) {
/* its a single date */
var startDate = dateField;
newSource += '&start_date='+startDate;
}

if(transaction_code != 0)
newSource += '&transaction_code_id='+transaction_code;
return newSource;
}

function redrawTable() {
oTable.fnSettings().sAjaxSource = buildAjaxSourceUrlBasedOnFormSelections();
oTable.fnDraw();
}

$("#datepicker").daterangepicker({
dateFormat: "yy-mm-dd",
onClose: function() {
redrawTable();
},
});

// setup the default date range to be the last 7 days
var default_date_range = default_start_date+" - "+default_end_date;
$("#datepicker").val(default_date_range);

$("#resourceDateResetBtn").click(function() {
$("#datepicker").val('');
redrawTable();
});

$( "#btnBar" ).buttonset();
$("#btnBar [name='radio']").change(function() {
redrawTable();
})

$('#transactionCodes').selectmenu({
speed: 400,
maxHeight: 400,
change: function(){ redrawTable(); }
});
[/code]

Notice that when my datepickers change I call redrawTable which in turn changes the ajax source on my table (because I am using server side filtering) and then it redraws the table through the API. This leads to results like the follwoing images show:

http://www.josephcrawford.com/pics/promo1.png
http://www.josephcrawford.com/pics/promo2.png
http://www.josephcrawford.com/pics/promo3.png