ColVis plus columns hidden by default plus column filtering
ColVis plus columns hidden by default plus column filtering
I wanted to use colVis to dynamically hide columns, start with some columns hidden by default, and use column filtering. I was running into problems with the filters not being aligned with the correct columns (because of the hidden columns), and with filter inputs not being initialized correctly on initially hidden columns. Combining some different ideas found on this forum, adding some tweaks and bug fixes, this is what I came up with:
[code]
function columnstatechange(){
$("tfoot input").keyup( function () {
var oSettings = oTable.fnSettings();
var renderedIndex=$("tfoot input").index(this);
var hiddenColumnsCount=0;
var aoColumns=oSettings.aoColumns;
//count the hidden columns preceding the currently active filter input.
//note: we want to stop counting at the current filter index, which is renderedIndex+hiddenColumnsCount
for (i=0; i<=renderedIndex+hiddenColumnsCount; i++) {
if (!aoColumns[i].bVisible) hiddenColumnsCount++;
}
oTable.fnFilter( this.value, renderedIndex+hiddenColumnsCount );
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" ) {
this.className = "";
this.title = this.value; // use the title attribute to store the temp value for the filter input
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" ) {
this.className = "search_init";
this.value = this.title;
}
} );
}
function init_table(){
oTable = $('#peopleTable').dataTable( {
"sDom": '<"tableHead"RC<"TTdiv"T><"clear">fr>t<"tableFoot"ilp>',
"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 0,5,7,8 ] } ],
"oLanguage": {"sSearch": "Search all columns:" },
// when the visibility of a column changes, reset the event listeners for all currently visible filter inputs:
"oColVis": { "fnStateChange": function (iColumn, bVisible) { columnstatechange(); } },
} );
columnstatechange();
};
[/code]
[code]
function columnstatechange(){
$("tfoot input").keyup( function () {
var oSettings = oTable.fnSettings();
var renderedIndex=$("tfoot input").index(this);
var hiddenColumnsCount=0;
var aoColumns=oSettings.aoColumns;
//count the hidden columns preceding the currently active filter input.
//note: we want to stop counting at the current filter index, which is renderedIndex+hiddenColumnsCount
for (i=0; i<=renderedIndex+hiddenColumnsCount; i++) {
if (!aoColumns[i].bVisible) hiddenColumnsCount++;
}
oTable.fnFilter( this.value, renderedIndex+hiddenColumnsCount );
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" ) {
this.className = "";
this.title = this.value; // use the title attribute to store the temp value for the filter input
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" ) {
this.className = "search_init";
this.value = this.title;
}
} );
}
function init_table(){
oTable = $('#peopleTable').dataTable( {
"sDom": '<"tableHead"RC<"TTdiv"T><"clear">fr>t<"tableFoot"ilp>',
"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 0,5,7,8 ] } ],
"oLanguage": {"sSearch": "Search all columns:" },
// when the visibility of a column changes, reset the event listeners for all currently visible filter inputs:
"oColVis": { "fnStateChange": function (iColumn, bVisible) { columnstatechange(); } },
} );
columnstatechange();
};
[/code]
This discussion has been closed.
Replies
One thing to note - there is a plug-in here http://datatables.net/plug-ins/api#fnVisibleToColumnIndex which I think would make things a little easier for you :-)
Allan
will this return the columns names instead of indexes?
[code]
$.fn.dataTableExt.oApi.fnVisibleToColumnIndex = function ( oSettings, iMatch )
{
return oSettings.oApi._fnVisibleToColumnIndex( oSettings, iMatch );
}
[/code]
it would be gr8 help if anyone can tell this.
thanks
medSwa
Are there any examples on how to implement?
Regards
Wayne.