Hide only columns not eliminate

Hide only columns not eliminate

jorge1687jorge1687 Posts: 2Questions: 1Answers: 0

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

  • dtimpermandtimperman Posts: 6Questions: 2Answers: 1
    edited June 2014 Answer ✓

    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');
            }
        });
    
  • jorge1687jorge1687 Posts: 2Questions: 1Answers: 0

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

This discussion has been closed.