Adding "hide column" image in each column header
Adding "hide column" image in each column header
Hi
I've read the docs on dynamically hiding/showing columns but there are 2 things it doesn't cover:
1. What is the recommending approach for customising column headers so that I can exclude an 'X' image to hide the column
2. How do I get the column number so that I can call oTable.fnSettings().aoColumns[iCol].bVisible;. It is possible by matching the text in the column header as below but it seems clunky and horrible:
[code]
$('.dataTable thead th').dblclick(function(){
var oTable = $('#programtable').dataTable();
var iCol = 0;
var myText = $(this).text();
console.log(oTable.fnSettings().aoColumns);
$(oTable.fnSettings().aoColumns).each(function(myvar, myval)
{
console.log(iCol + 'is ' +myval.sTitle);
if (myval.sTitle == myText) {
return false;
}
iCol++;
})
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true )
});
[/code]
I've read the docs on dynamically hiding/showing columns but there are 2 things it doesn't cover:
1. What is the recommending approach for customising column headers so that I can exclude an 'X' image to hide the column
2. How do I get the column number so that I can call oTable.fnSettings().aoColumns[iCol].bVisible;. It is possible by matching the text in the column header as below but it seems clunky and horrible:
[code]
$('.dataTable thead th').dblclick(function(){
var oTable = $('#programtable').dataTable();
var iCol = 0;
var myText = $(this).text();
console.log(oTable.fnSettings().aoColumns);
$(oTable.fnSettings().aoColumns).each(function(myvar, myval)
{
console.log(iCol + 'is ' +myval.sTitle);
if (myval.sTitle == myText) {
return false;
}
iCol++;
})
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true )
});
[/code]
This discussion has been closed.
Replies
Just put an img tag into the header and attach an event handler to it. However, you can't get the header back once you close it using that method.
> 2. How do I get the column number
[code]
var index = $(this).index();
[/code]
will do it, as long as you have only one TR row in the header.
DataTables 1.10 is going to introduce a new API to make this kind of thing much easier!
Allan
My headers are rendered dynamically by the script as some are set to hidden (depending on which the columns the user has asked for) so I'm wondering how to add the image programatically?
[code]
$('#myTable thead th')
.append('')
.children('img')
.click( function () {
table.fnSetColumnVis( $(this).parents('th').index(), false );
} );
[/code]
Working example (also takes into account the visible column to column index issue): http://live.datatables.net/ahuqus/edit#javascript,html
Allan