Responsive Mode Hide Column

phil_c64

Hello, I need to hide a column permanently that's just being used for date filtering not to be visible on the frontend

https://form.kingfisher.design/afternoon-tea-bookings/

The applied class that works on non-mobile however it strips out the class on mobile.

How would I apply a display none column to the table permanently? I read the documentation but am not sure how to initialise https://datatables.net/reference/option/columns.visible

Many thanks

kthorngren

I'm not sure where your Datatables init code is at the link you provided. But you apply it like one of the examples in the columns.visible docs. Also take a look at this running example. If you still need help please post your datatables init code.

Kevin

phil_c64

Hi kthorngren,

The init code is

var table = $("table.dataTablePrintPDF").DataTable({
    responsive: true,
    stateSave: true,
    dom: "Bfrtip",
    order: [[1, "desc"]],
    buttons: [{ extend: "print" }, { extend: "pdfHtml5" }],
  });

Many thanks

kthorngren

Use the columnDefs example, like this:

  "columnDefs": [
    { "visible": false, "targets": 0 }
  ],

With columnDefs.targets being the column number.

Kevin

phil_c64

I'd tried the below before posting Couldn't get it working.

"columnDefs": [
  { "visible": false, "targets": 2 }
],

Full init.

var table = $("table.dataTablePrintPDF").DataTable({
    responsive: true,
    stateSave: true,
    dom: "Bfrtip",
    order: [[1, "desc"]],
    "columnDefs": [
      { "visible": false, "targets": 2 }
    ],
    buttons: [{ extend: "print" }, { extend: "pdfHtml5" }],
  });

Now come back and it's worked. I think there's a server side cache in place hence the delay.

Thanks @kthorngren.