Select Filtering Columns

jcrawford

Hello,

I came across the two examples listed for filtering columns with a select drop down and text field. I am trying to implement both of them and found it difficult this far. My table code looks like this:

[code]



Select All
ID
KEYWORD
KEYWORD TYPE
WEBSITE
MERCHANT PARTNER
ENABLED




Loading data from server




 









[/code]

Notice the first column contains a check box. When I tried to implement the select filtering code (http://datatables.net/examples/api/multi_filter_select.html) I altered the portion of code like the following

[code]
// Original
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );

// Modified
$("tfoot th.selectable_filter").each( function ( i ) {
this.innerHTML = fnCreateSelect( keywordsTable.fnGetColumnData(i) );
$('select', this).change( function () {
keywordsTable.fnFilter( $(this).val(), i );
} );
} );

[/code]

This seems to create the select drop down just fine however I think it is still looping all of the columns when it tries to get the data, I say this because I have 10 Checkboxes put next to the drop down which has no content inside to select.

Am I missing something here? The rest of the code I have in place is out of the box code that did not require any modification.

Any assistance would be appreciated.

Thanks,
Joseph Crawford

jcrawford

After further investigation it seems that the each on the $("tfoot th.selectable_filter").each( function ( i ) { is a 0 based index. Rather than returning the column index it starts at 0. Is there a way I could do this so that it would not be 0 based but rather use the column index?

ciastek

It's ugly, but works:
[code]
/* column select filter {
http://www.datatables.net/examples/api/multi_filter_select.html */
(function($) {
/*
* Function: fnGetColumnData
* (...)
* Author: Benedikt Forchhammer
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
(...)
}
return asResultData;
}}(jQuery));

function createSelect(aData) {
var r='';
iLen=aData.length;
for ( i=0 ; i

ciastek

I've added column range filter. Still ugly. :)
[code]
/* range filter { */
function createRange(iCol){
var maxid = 'col' + iCol + 'max';
var minid = 'col' + iCol + 'min';
$.fn.dataTableExt.afnFiltering.push(
function ( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById(minid).value * 1;
var iMax = document.getElementById(maxid).value * 1;
var iColumn = aData[iCol] == "-" ? 0 : aData[iCol]*1;
if ( iMin == "" && iMax == "")
return true;
else if ( iMin == "" && iColumn <= iMax)
return true;
else if ( iMin <= iColumn && iMax == "")
return true;
else if ( iMin <= iColumn && iColumn <= iMax)
return true;
return false;
}
);
return '
';
}
/* range filter } */
[/code]
and in $(document).ready
[code]
else if( $(this).hasClass('range') ) { /* range filter { */
this.innerHTML = createRange(i);
$('input',this).keyup( function() {
oTable.fnDraw();
} );
}; /* range filter } */
[/code]

alexsuslin

Here is how to use input and select filter simultaneously:

1. apply class="select" on any where select filter is expected
2. change create select function to [code]$("tfoot th.select")[/code] // notice I've added .select
3. change the function on keyup for selector "tfoot input" - so it should return the right index:

[code] $("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot th").index($(this).parent()) );
} );
[/code]