nkbved nkbved - 7 days ago 5
jQuery Question

jQuery DataTables Column Hiding

I want to have a DataTable that displays a few columns, then shows data for other unseen columns underneath (by clicking a plus sign at the start of the row). However, I have only been able to see the "+" sign when the window width is small enough to force columns already shown in the table to be moved off.

There is a fiddle that contains a sample of the problem I'm having: https://jsfiddle.net/ryanoc/ebRXw/

$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );


I hoped that making the table responsive would do the trick, with no luck.

The 3rd column is being "hidden", but there is no "+" sign until you decrease the width where the table is enough to require shifting columns off the table. I am stuck on how to manually force certain columns to be hidden while always showing the "+" sign, and any help would be appreciated.

Answer

Adding class="none" to the th seems to do what you need:

<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th class="none">Office</th>
        <th>Age</th>
        <th class="none">Start date</th>
        <th>Salary</th>
    </tr>
</thead>

I've also added the display responsive nowrap classes to the table:

<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">

Working example here based on your data, I've removed the CSS...