Responsive Mode Hide Column

Responsive Mode Hide Column

phil_c64phil_c64 Posts: 8Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194
    edited July 19

    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_c64phil_c64 Posts: 8Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194
    edited July 19 Answer ✓

    Use the columnDefs example, like this:

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

    With columnDefs.targets being the column number.

    Kevin

  • phil_c64phil_c64 Posts: 8Questions: 2Answers: 0

    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.

Sign In or Register to comment.