Hide only columns not eliminate

jorge1687

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>

dtimperman

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>

     $('.toggle-vis').each(function(i, obj) {
        //get column API object(attribute 'data-column' contains index of column)
        var column = oTable.column($(this).attr('data-column'));
        if (column.visible()) {
            $(this).removeClass('hidden');
        } else {
            $(this).addClass('hidden');
        }
    });

    //on click of 'toggle-vis' classes handle column visibility
    $('.toggle-vis').on('click', function(e) {
        //get column API object(attribute 'data-column' contains index of column)
        var column = oTable.column($(this).attr('data-column'));
        if (column.visible()) {
            column.visible(false);
            $(this).addClass('hidden');
        } else {
            column.visible(true);
            $(this).removeClass('hidden');
        }
    });

jorge1687

Thanks for your code and your time.

I implemented the next solution. I add the next code

$('#mytable').dataTable({
"createdRow": function ( row, data, index ) {
                        $('td', row).eq(4).addClass("hidetd");
                        $('td', row).eq(5).addClass("hidetd");
                    },
"ajax": {
             url: "myurl"
     }
});

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

allan

I'd suggest against using display:none on table elements as it can do odd things in older browsers. Use columns.visible or the API as @dtimperman suggests.

Allan