Input type filter is not working when i skip first column.
Input type filter is not working when i skip first column.
Hi All,
I'm new to datatable. I would like to implement a individual column filtering with datatable.As my frst column is a check box i simply skipped and placed input boxes in all other of footer.[code]
[/code]
My initailization is same as in the example [code]$(document).ready(function() {
var oTable = $('#table1').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
$("tfoot input").keyup( function () {
/* 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 = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]. But the filter is not working properly. Please help me in resolving this. Thanks in advance
I'm new to datatable. I would like to implement a individual column filtering with datatable.As my frst column is a check box i simply skipped and placed input boxes in all other of footer.[code]
[/code]
My initailization is same as in the example [code]$(document).ready(function() {
var oTable = $('#table1').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
$("tfoot input").keyup( function () {
/* 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 = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]. But the filter is not working properly. Please help me in resolving this. Thanks in advance
This discussion has been closed.
Replies
[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/g, "" );
r += ''+stripped+'';
}
return r+'';
}
function fnResetSomeFilters() {
var oSettings = oTable.fnSettings();
oSettings.aoPreSearchCols[0].sSearch = '';
oTable.fnDraw();
//console.log(oSettings);
}
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#table1').dataTable({"sDom": '<"top"i>rt<"bottom"lp><"clear">'
,"bInfo": false,"bPaginate": false,"bAutoWidth": false,"sScrollY":400
});
// new FixedHeader( oTable, { "bottom": true } );
//fnResetSomeFilters();
$(".dataTables_scrollFootInner 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 );
} );
}else{
oTable.fnFilter("",0,false);
}
});
} );
[/code]
I tried using fnResetSomeFilters() function but which makes the filter function not working So i tried oTable.fnFilter("",0,false); but which makes the filter working in an inapropriate way as my 5th filter is filtering based on the second,6th based on third and 7th based on fourth.
Here is my table footer where i placed the filter.
[code]
[/code]. Please help me to resolve this.