Filtering: Use both input and select boxes!
Filtering: Use both input and select boxes!
Hi all,
I'm doing a project where I needed to have input boxes to filter 'unique' data (e.g dates, names, etc) but then also use select boxes on fields with non-unique or repeating data (e.g status: green, amber, red). So, to do this I had to modify the provided input function, which is used with the fnGetColumnData function.
The function requires to to add a class to each of the footers items you want to use an input or select on. 'datainput' = an input box and 'dataselect' = a select box. An example table is like so:
[code]
ID
Name
Type
Status
<!-- records here -->
[/code]
The footer shows the classes being put to use in the footer. You still have to populate the with either an input box or blank select box.
The javascript function, which is to be called after the datatable initialization is below:
[code]
$("tfoot th").each( function ( i ) {
if($(this).is('.datainput'))
{
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
});
}
else if($(this).is('.dataselect'))
{
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
}
});
[/code]
Here's a small screenshot showing the final output:
http://img841.imageshack.us/img841/6349/datatablemultifilter.png
Hope this helps someone out there who is looking to do this :)
I'm doing a project where I needed to have input boxes to filter 'unique' data (e.g dates, names, etc) but then also use select boxes on fields with non-unique or repeating data (e.g status: green, amber, red). So, to do this I had to modify the provided input function, which is used with the fnGetColumnData function.
The function requires to to add a class to each of the footers items you want to use an input or select on. 'datainput' = an input box and 'dataselect' = a select box. An example table is like so:
[code]
ID
Name
Type
Status
<!-- records here -->
[/code]
The footer shows the classes being put to use in the footer. You still have to populate the with either an input box or blank select box.
The javascript function, which is to be called after the datatable initialization is below:
[code]
$("tfoot th").each( function ( i ) {
if($(this).is('.datainput'))
{
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
});
}
else if($(this).is('.dataselect'))
{
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
}
});
[/code]
Here's a small screenshot showing the final output:
http://img841.imageshack.us/img841/6349/datatablemultifilter.png
Hope this helps someone out there who is looking to do this :)
This discussion has been closed.
Replies
[code]
[/code]
My initialization is given below.
[code](function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();
// by default we only wany unique data
if ( typeof bUnique == "undefined" ) bUnique = true;
// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;
// by default we do not wany to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i=0,c=aiRows.length; i -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData;
}}(jQuery));
function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i