fnFilter sends wrong column index
fnFilter sends wrong column index
Hi, love datatables.
I'm using server side, hidden columns and column searching. Here is the setup code:
[code]
oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 1 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 2 ] },
{ "bSearchable": false, "bVisible": false, "aTargets": [ 3 ] },
{ "bSearchable": false, "bVisible": false, "aTargets": [ 4 ] },
{ "bSearchable": false, "bVisible": false, "aTargets": [ 5 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 6 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 7 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 8 ] }
],
"aLengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
"iDisplayLength": 5,
"sScrollY": "250px",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"fnServerParams": function ( aoData ) {
aoData.push(
{ "name": "SWlat", "value": coords[0]},
{ "name": "SWlng", "value": coords[1]},
{ "name": "NElat", "value": coords[2]},
{ "name": "NElng", "value": coords[3]} )
},
"fnDrawCallback": function (oSettings) {plotMarkers()},
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
alert($("thead input").index(this));
} );
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
[/code]
And the html:
[code]
Main_ID
Site ID
Site
Longitude
Latitude
Kind_ID
Kind
MAR (g/m2/year)
LGM or MOD
Loading data from server
Main_ID
ID
Site
Longitude
Latitude
Kind_ID
Kind
MAR (g/m2/year
LGM or MOD
[/code]
It's nearly working but the sSearch values passed to the server are in the order of the visible input columns rather than all the columns so the search ends up being applied to the wrong columns. Example:
[code]
NElat 30
NElng 60
SWlat -30
SWlng -60
_ 1383057737794
bRegex false
bRegex_0 false
bRegex_1 false
bRegex_2 false
bRegex_3 false
bRegex_4 false
bRegex_5 false
bRegex_6 false
bRegex_7 false
bRegex_8 false
bSearchable_0 false
bSearchable_1 true
bSearchable_2 true
bSearchable_3 false
bSearchable_4 false
bSearchable_5 false
bSearchable_6 true
bSearchable_7 true
bSearchable_8 true
bSortable_0 true
bSortable_1 true
bSortable_2 true
bSortable_3 true
bSortable_4 true
bSortable_5 true
bSortable_6 true
bSortable_7 true
bSortable_8 true
iColumns 9
iDisplayLength 5
iDisplayStart 0
iSortCol_0 8
iSortingCols 1
mDataProp_0 0
mDataProp_1 1
mDataProp_2 2
mDataProp_3 3
mDataProp_4 4
mDataProp_5 5
mDataProp_6 6
mDataProp_7 7
mDataProp_8 8
sColumns
sEcho 10
sSearch
sSearch_0
sSearch_1
sSearch_2
sSearch_3
sSearch_4 hello
sSearch_5
sSearch_6
sSearch_7
sSearch_8
sSortDir_0 asc
[/code]
here hello was typed into the LGM_MOD search field so it should appear as sSearch_8 rather than sSearch_4.
Any idea how I can fix this?
Many thanks.
I'm using server side, hidden columns and column searching. Here is the setup code:
[code]
oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 0 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 1 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 2 ] },
{ "bSearchable": false, "bVisible": false, "aTargets": [ 3 ] },
{ "bSearchable": false, "bVisible": false, "aTargets": [ 4 ] },
{ "bSearchable": false, "bVisible": false, "aTargets": [ 5 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 6 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 7 ] },
{ "bSearchable": true, "bVisible": true, "aTargets": [ 8 ] }
],
"aLengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
"iDisplayLength": 5,
"sScrollY": "250px",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"fnServerParams": function ( aoData ) {
aoData.push(
{ "name": "SWlat", "value": coords[0]},
{ "name": "SWlng", "value": coords[1]},
{ "name": "NElat", "value": coords[2]},
{ "name": "NElng", "value": coords[3]} )
},
"fnDrawCallback": function (oSettings) {plotMarkers()},
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
alert($("thead input").index(this));
} );
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
[/code]
And the html:
[code]
Main_ID
Site ID
Site
Longitude
Latitude
Kind_ID
Kind
MAR (g/m2/year)
LGM or MOD
Loading data from server
Main_ID
ID
Site
Longitude
Latitude
Kind_ID
Kind
MAR (g/m2/year
LGM or MOD
[/code]
It's nearly working but the sSearch values passed to the server are in the order of the visible input columns rather than all the columns so the search ends up being applied to the wrong columns. Example:
[code]
NElat 30
NElng 60
SWlat -30
SWlng -60
_ 1383057737794
bRegex false
bRegex_0 false
bRegex_1 false
bRegex_2 false
bRegex_3 false
bRegex_4 false
bRegex_5 false
bRegex_6 false
bRegex_7 false
bRegex_8 false
bSearchable_0 false
bSearchable_1 true
bSearchable_2 true
bSearchable_3 false
bSearchable_4 false
bSearchable_5 false
bSearchable_6 true
bSearchable_7 true
bSearchable_8 true
bSortable_0 true
bSortable_1 true
bSortable_2 true
bSortable_3 true
bSortable_4 true
bSortable_5 true
bSortable_6 true
bSortable_7 true
bSortable_8 true
iColumns 9
iDisplayLength 5
iDisplayStart 0
iSortCol_0 8
iSortingCols 1
mDataProp_0 0
mDataProp_1 1
mDataProp_2 2
mDataProp_3 3
mDataProp_4 4
mDataProp_5 5
mDataProp_6 6
mDataProp_7 7
mDataProp_8 8
sColumns
sEcho 10
sSearch
sSearch_0
sSearch_1
sSearch_2
sSearch_3
sSearch_4 hello
sSearch_5
sSearch_6
sSearch_7
sSearch_8
sSortDir_0 asc
[/code]
here hello was typed into the LGM_MOD search field so it should appear as sSearch_8 rather than sSearch_4.
Any idea how I can fix this?
Many thanks.
This discussion has been closed.
Replies
Allan
[code]
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, oTable.fnVisibleToColumnIndex($("thead input").index(this)) );
} );
[/code]
It now works exactly as planned.
Thanks Allan