Do not display hidden columns during page loading

Gnorro1976

Hi

When I load a page with datatable, I see all columns displayed at the beginning. Then, when data is loaded, the columns that shouldn't be displayed are correctly hidden. Is there a way to load only visible columns (maybe with some datatable option)?

Thanks

john_l

How is are the rows for the datatable supplied? Are they in the page in the table when it loads? If so, then you'll need to have the columns hidden in the initial HTML, so they are hidden before the DataTables JavaScript runs.

You could do this by giving each cell you want hidden a CSS class that sets 'display: none', and make sure that the CSS definition is at the top of the page.

Gnorro1976

Hi John and thanks for your reply

Data is loaded by ajax with a REST service call.

If there is not a parameter to do that, I suppose that the only solution is give an hidden class to table (or columns) and then show it after data is loaded.

is this right?

Thanks

john_l

You can try that, but there might be a problem when initializing the DataTable if it can't work out the sizing for the columns due to the table being hidden.

Instead you could use the same method I mentioned for when the table is already in the page, but when you initialize the table, define the columns you want hidden with a class that will hide them.

ignignokt

I never really noticed this happening until I watched for it. Try defining the column names with datatables and leave the content of your table tags empty. You can leave your hidden columns in, just don't give them an sTitle. For some reason if you give them one, even with the className:"never" thrown in there, they still show up on loading.

JS:

$('#my_table').DataTable({
    columns:[
        {sTitle:"Name",data:"Name"},
        {sTitle:"Address",data:"Address"},
        {sTitle:"name_id",data:"name_id",className: "never"}, //this still shows on load
        {data:"address_id",className: "never"} //does not show on load
    ],
    processing: true,
    serverSide: true,
    ajax: {
        url:"/my/url",
        type:"POST"
    }
});

HTML:

<table id="my_table" class="display">
</table>