Using column filtering and range filtering together (server-side)

dennis

I'm using server-side processing. I have column filtering on each column and on one column I also have two datepickers to do range filtering (the free-form filter field is also present). All these inputs are included in the table footer. The datepickers and the free-form filter work fine.

The other columns' filtering also works except for the last column.

The problem seems to be that the date pickers are included in the column indexing so that the last column (which would be sSearch_6) is never sent to the server (only sSearch_0 - _5 are sent. sSearch_3 and _4 are taken up by the datepickers and I have to do some offsetting to align the database field index with the query data coming from the client.

Here is some relevant server-side code:

[code]
/* Individual column filtering */
for ( $i=0 ; $i 4)
{
$offset = 1;
}
else
{
$offset = 0;
}
$idx = $i - $offset;

if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
{
if ( $sWhere == "" )
{
$sWhere = "WHERE ";
}
else
{
$sWhere .= " AND ";
}
$sWhere .= $aColumns[$idx]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
}
}
[/code]

And here are some client-side snippets:

[code]
"fnServerParams": function (aoData, fnCallback) {
aoData.push( {"name": "date_min", "value": $('#date_min').val() } );
aoData.push( {"name": "date_max", "value": $('#date_max').val() } );
},
"aoColumns": [
null,
null,
null,
{ "sClass": "center", "bSortable": false },
{ "sClass": "truncate" },
null
[/code]

[code]
$( "#date_min" ).datepicker( {
dateFormat: "yy-mm-dd",
"onSelect": function(date) {
date_min = new Date(date).getTime();
oTable.fnDraw();
}
} ).keyup( function () {
date_min = new Date(this.value).getTime();
oTable.fnDraw();
} );

$( "#date_max" ).datepicker( {
dateFormat: "yy-mm-dd",
"onSelect": function(date) {
date_max = new Date(date).getTime();
oTable.fnDraw();
}
} ).keyup( function () {
date_max = new Date(this.value).getTime();
oTable.fnDraw();
} );
$("tfoot input").keyup( function () {
if ( this.className != "date_range hasDatepicker" )
{
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
}
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" && this.className != "date_range hasDatepicker" )
{
this.className = "";
this.value = "";
}
else if (this.className == "date_range hasDatepicker")
{
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" && this.className != "date_range hasDatepicker" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
else if ( this.value == "" && this.className == "date_range hasDatepicker" )
{
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
[/code]
[code]







[/code]


How can I get these to work together?