CSS being removed...

Dane Jurkovic

Hello and thank you to anyone that helps me with this problem...

Ok so I have a table that has 40 columns (not by choice, I am "forced" to have them) and only the first 6 columns are allowed to be visible. The entire table needs to be seen when someone does a "view source". This is so a screen scraper (another site not controlled by us) can still pull from the hidden parts of the table.

I was using the following code to hide the columns but because the table is so big you can see the table dynamically being resized/hidden.

<table id="myTable" class="table table-striped table-bordered table-hover">
    <th>...</th>
    <th>...</th> 
    <th>...</th>
    <th>...</th> 
    <th>...</th>
    <th>...</th> 
    <th>...</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td> 
    <td>...</td>
    <td>...</td>
    <td>...</td> 
    <td>...</td>
    <td>...</td>
  </tr>
</table>

$(document).ready(function () {
    var table = $('#myTable').DataTable({
        responsive: true,
        order: [1, 'asc'],
        columnDefs:
        [
            { searchable: false, orderable: false, targets: [0] },
            { visible: false, targets: [6, 7, 8....] }
        ]
    });
});

So I thought to just hide the columns on the table using this code

<table id="myTable" class="table table-striped table-bordered table-hover">
  <tr>
    <th>...</th>
    <th>...</th> 
    <th>...</th>
    <th>...</th> 
    <th>...</th>
    <th>...</th> 
    <th style="display:none;">...</th>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td> 
    <td>...</td>
    <td>...</td>
    <td>...</td> 
    <td>...</td>
    <td style="display:none;">...</td>
  </tr>
</table>

$(document).ready(function () {
    var table = $('#myTable').DataTable({
        responsive: true,
        order: [1, 'asc'],
        columnDefs:
        [
            { searchable: false, orderable: false, targets: [0] }
        ]
    });
});

The problem is that the inline CSS that I add is being removed. Any way of doing this?

Again thanks for any help you can provide...

kthorngren

Not sure that anything is being removed, you can use "inspect" to verify. However I think responsive is affecting the display. Try setting class="never" on the thead of the columns you don't want displayed and I think Responsive will ignore them. Take a look at this example:
https://datatables.net/extensions/responsive/examples/column-control/classes.html

Kevin

allan

Yes - exactly what Kevin says. Responsive is basically overruling your display:none since that is how it hides columns.

Use columns.visible if you just want to hide columns.

Allan