Hide controls like "buttons", "pageLength", ... when printing web page

Hide controls like "buttons", "pageLength", ... when printing web page

sloloslolo Posts: 75Questions: 15Answers: 1

Link to test case: https://live.datatables.net/janodapo/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

I would like to know if there is a way to hide controls like "buttons", "pageLength", "search", ... (see controls in red square) when printing the entire web page?

I know that the "Print" button is made to print the Datatable but in this case I am talking about the entire web page.

I looked at the code but didn't see a class I could use in css with "@media print" to hide the controls.

Thanks in advance for your help and have a nice day.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 64,299Questions: 1Answers: 10,618 Site admin
    Answer ✓

    Try:

    @media print {
      div.dt-length,
      div.dt-search,
      div.dt-info,
      div.dt-paging,
      div.dt-buttons {
        display: none;
      }
    }
    

    Easiest way is often just to right click on the element in question and select "Inspect".

    Allan

  • sloloslolo Posts: 75Questions: 15Answers: 1

    Shame on me.

    I did inspect the DOM, but I didn't drill down deep enough into the nodes.
    I assumed we could hide the layout "blocks" and didn't think to look at each element individually.

    Thank you so much @allan and have a nice day!

  • allanallan Posts: 64,299Questions: 1Answers: 10,618 Site admin

    You could do:

    div.dt-layout-row:not(.dt-layout-table) {
      display: none;
    }
    

    You might need to tweak it if you are using one of the styling integrations though.

    Allan

Sign In or Register to comment.