Hide only columns not eliminate
Hide only columns not eliminate
i have a table and i fill it with ajax, the table has 6 columns(0,1,2,3,4,5) but i want only display 4 columns(0,1,2,3,4), not eliminate
My code
$('#'+id).dataTable({
"columnDefs": [{
"targets": [ 4 ],
"visible": false,
"searchable": false
},
{
"targets": [ 5 ],
"visible": false,
"searchable": false
}],
});
/*** No display nothing ***/
$('#'+id+' tbody').on('click', 'tr', function () {
alert($('td', this).eq(4).text());
} );
with this code the html is
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
I want 6 colums, because i obtain it the value for colum 4 and 5.
Is there a option for hide columns and not deleting it
Example
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="visibility:hidden;"></td>
<td style="visibility:hidden;"></td>
</tr>
This question has an accepted answers - jump to answer
Answers
I use the following to hide and show columns on span click:
(example for second column)
<span class="toggle-vis" data-column="1">column x</span>
Thanks for your code and your time.
I implemented the next solution. I add the next code
when it create the column, I add the css class 'hidetd' that hidden the colums i want, later I can obtain the value for these columns
I'd suggest against using
display:none
on table elements as it can do odd things in older browsers. Usecolumns.visible
or the API as @dtimperman suggests.Allan