Pass multiple range values (min,max) to filter using select box

sirrahleone

Choosing a number range from a column is achieved by entering two values (min,max) into separate text boxes, and this is fine, however, there are situations where it is preferable to choose from a predetermined set of ranges.

In my case, I wish to choose from a set of year ranges (decades, eg: 1990 to 1999) using a single select box, and on the onchange event, have the respective values passed to DataTables to do its magic. Have a look at the code below to see what I mean. I can pass two variables to text boxes using the split() method, but I need to pass them to the DataTables filter. How do I do this?

[code]

//<![CDATA[
$(document).ready( function() {
$("#decade").change(function() {
var substr = $("#decade").val().split(",");
// alert(substr[0]);
// alert(substr[1]);
$("#min").val(substr[0]);
$("#max").val(substr[1]);
/* where do we go from here? */
});
});
//]]>






1980 to 1989
1990 to 1999
2000 to 2010

[/code]
This should take the selected option value, split the string into an array of two substrings (separated by ",") and deliver the results to the respective text box. Fine. However, I need those results (min,max) to continue their journey to DataTables and return a range of years (decade) from column 3 of my table.

Any suggestions, or a workable solution, will be appreciated.

Thanks.

Note: This could be included as an option for DataTables: the ability to pass multiple values (min,max) to a filter using a single select box.

sirrahleone

Has anyone had any thoughts about this yet?

hatetoregister

I am in the same boat @sirrahleone.
In my case, I am filtering using several drop downs. I am using fnFilter with a search string. However, the problem is that I want to use two additional drop downs to filter a date column, but I'm not sure how to create the search string for that. If I could just create that search string, I would be good to go. Please post back here if you figure out the answer and I will do the same.

varmajp

drop down OnChange event call $('#table').dataTable().fnFilter(
fliterText,
columnIndex,
true,
true
);

server side : var filter1 = Convert.ToString(Request["sSearch_columIndex"]);

hope this helps.

Thanks,
PJ

hatetoregister

Thanks varmajp. I have done what I consider to be a complete and total hack, yet it works great for me.

In my case, I have 5 drop down lists and list boxes that a user can filter the table on. The list boxes allow multiple items to be selected and the drop down lists allow individual filtering, BUT in some cases, if you select certain drop downs, I let the user filter by start date and end date. I also have two drop down select lists that contain the start and end dates they can filter by.

Here is what I did.
I grab the startdate and the enddate on the change event of both the date drop downs.
If the start date is less than the end date, I do my processing.
I loop through the select list that populates the date drop downs and I check to see if it is greater than or equal to my startdate AND less than or equal to my enddate.
If it falls within the parameters, I add it to the search string.
After I am done that, I add in all of the other drop down list values and call fnfilter with the search string.

Please note that I put this in a function since it is called twice, but here was the original idea I came up with BEFORE I put it in a function.

[code]


$.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/*default true*/) {
for (iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
oSettings.aoPreSearchCols[iCol].sSearch = '';
}
oSettings.oPreviousSearch.sSearch = '';

if (typeof bDraw === 'undefined') bDraw = true;
if (bDraw) this.fnDraw();
}


$.fn.dataTableExt.oApi.fnProcessTable = function () {

var sSearchString = "";
var vendorName = $('#VendorName').val() + "";
var transportationMethod = $('#TransportationTypeId').val() + "";

//deselect every item in puechase order
$('#PurchaseOrderId').val("");

if ($('#StartDateId').val() <= $('#EndDateId').val()) {

//variables
var startDate = $('#StartDateId').val();
var endDate = $('#EndDateId').val();

//parse the date select list and get all of the dates between the
//dates specified and add them to the search string
$("#EndDateId > option").each(function () {
//compare the date
if (this.text >= startDate && this.text <= endDate) {
//add the item to the search string
sSearchString = sSearchString + "|" + this.text;
}
});
}

//reset everything
this.fnResetAllFilters();

//filter the column vendors
if (vendorName != "ALL" && vendorName != "") {
//filter the column vendors first
this.fnFilter(vendorName.replace(/,/gi, "|"), 2, true, false);
}

//filter the column transportation method
if (transportationMethod != "ALL" && transportationMethod != "") {
//filter the column vendors first
this.fnFilter(transportationMethod, 5);
}

//determine if there is a pipe at the beginning of the string
if (sSearchString.substring(0, 1) == "|") {
sSearchString = sSearchString.substring(1, sSearchString.length() - 1);
}

//filter again on the other search terms
this.fnFilter(sSearchString, null, true, false);
}

$(document).ready(function () {
var oTable = $('#tblInventoryLabels').dataTable({
"sDom": '<"clear">lfrtip', //use for testing to see the search values in the text box
//"sDom": '<"clear">lrtip',
"iDisplayLength": 100,
"aLengthMenu": [[100, 150, 200, 250, 300, 350, -1], [100, 150, 200, 250, 300, 350, "All"]],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});

// filter by purchase order id
$('#PurchaseOrderId').change(function () {

//deselect every item
$('#VendorName').val([]);

//get the purchase order and filter on it
var sSearchString = $(this).val()

//filter
oTable.fnFilter(sSearchString, null, true, false);

});
// filter by transportation type
$('#TransportationTypeId').change(function () {
oTable.fnProcessTable();
});
// filter by vendor
$('#VendorName').change(function () {
oTable.fnProcessTable();
});

// filter by date
$('#StartDateId').change(function () {
oTable.fnProcessTable();
});

// filter by date
$('#EndDateId').change(function () {
oTable.fnProcessTable();
});

});


[/code]
I know this may not be the best or most elegant solution, but if you don't have time to figure out the best solution, then you can use this. I intend to revisit the issue when I have time to figure out the proper way this should be done.