Is it possible to hide all columns and then make selected one visible?

MJJ79

I am using some php and a large csv file to produce various html datatables. The csv file is made up of 78 columns, but I only ever need to show between 12 and 15 columns at any one time.

I'd prefer to keep the csv file as one, rather than create lots of smaller files, but I can only find a way to hide columns using:

{ visible: false, targets: 0 },

Is it possible to hide all columns, and the make the chosen say 12 columns visible: true? Rather than make 66 columns visible:false?

kthorngren

See the columnDefs.targets docs for the available selector options. You could use a classname to define the columns to hide and add that classname to the appropriate th.

You could set columnDefs.targets to "_all" to hide all the columns then in initComplete use column().visible() or columns().visible() to show the desired columns.

You can hide all the columns and use the Colvis Button to allow the end user to choose the columns to make visible.

Kevin

allan

Further to Kevin's excellent comment, it is actually possible to "stack" option in columnDefs. i.e. you can set a "global" option and then override it. The priority order for columnDefs is that the earlier in the array, the higher the priority.

So:

var table = new DataTable('#example', {
  columnDefs: [
    {
      target: 0,
      visible: true
    },
    {
      targets: '_all',
      visible: false
    }
  ]
});

Will do what you ask. Hide all columns and then make one visible.

https://live.datatables.net/vixukire/1/edit

Allan

MJJ79

Thanks both, I found Allan's answer to be the easiest to use and works perfectly.