Column filters do not appear
Column filters do not appear
Hi.
I'm trying to use the column filter feature with DataTables 1.8.2 and ColVis, but the column filter input boxes do not appear on the page. Here is a shortened version of my code:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Portal
$(document).ready(function() {
var oTable;
var asInitVals = new Array();
/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
/*oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );*/
oTable.fnFilter( this.value, $("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)];
}
} );
oTable = $('#dataTable').dataTable({
'sDom': 'RC<"clear">lfrtip',
'oLanguage': {
'sSearch': 'Search all columns:'
},
'bAutoWidth': false,
'bFilter': true,
'aaData': [
['AMC', '12', 'rem', '1', '683062', 'SampleSurname', 'A', 'Alias', 'X', '3/09/1900', '50', 'M', '6/10/2008', 'NULL', '7'],
['AMC', '12', 'rem', '1', '689391', 'SampleSurname', 'D', 'Alias', 'S', '19/10/1970', '37', 'M', '15/07/2011', 'NULL', '7']
],
'aoColumns': [
{ 'sTitle' : 'Col1', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col2', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col3', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col4', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col5', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col6', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col7', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col8', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col9', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col10', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col11', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col12', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col13', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col14', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col15', 'sWidth' : '50px', 'sType' : 'html' }
]
});
});
Test
Back to Search Results
Back to Search Results
[/code]
Everything works, except there are no column filters present on the page. I might not be using the sDom parameter correctly, I'm not sure...
Cheers.
I'm trying to use the column filter feature with DataTables 1.8.2 and ColVis, but the column filter input boxes do not appear on the page. Here is a shortened version of my code:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Portal
$(document).ready(function() {
var oTable;
var asInitVals = new Array();
/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
/*oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );*/
oTable.fnFilter( this.value, $("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)];
}
} );
oTable = $('#dataTable').dataTable({
'sDom': 'RC<"clear">lfrtip',
'oLanguage': {
'sSearch': 'Search all columns:'
},
'bAutoWidth': false,
'bFilter': true,
'aaData': [
['AMC', '12', 'rem', '1', '683062', 'SampleSurname', 'A', 'Alias', 'X', '3/09/1900', '50', 'M', '6/10/2008', 'NULL', '7'],
['AMC', '12', 'rem', '1', '689391', 'SampleSurname', 'D', 'Alias', 'S', '19/10/1970', '37', 'M', '15/07/2011', 'NULL', '7']
],
'aoColumns': [
{ 'sTitle' : 'Col1', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col2', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col3', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col4', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col5', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col6', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col7', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col8', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col9', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col10', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col11', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col12', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col13', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col14', 'sWidth' : '50px', 'sType' : 'html' },
{ 'sTitle' : 'Col15', 'sWidth' : '50px', 'sType' : 'html' }
]
});
});
Test
Back to Search Results
Back to Search Results
[/code]
Everything works, except there are no column filters present on the page. I might not be using the sDom parameter correctly, I'm not sure...
Cheers.
This discussion has been closed.