Datatable buttons display

Datatable buttons display

RaffeRaffe Posts: 8Questions: 3Answers: 0

Hello Everyone,

New to this so sorry for the questions. I have made a test case that is found here: https://jsfiddle.net/59n72pkw/

I have a few things that I can not figure ot how to do:

  1. I would like to move the download button to the right of the search.

  2. Under the download button I would like to have only the icon and the text and make the button transparent and move the text to the left.

  3. I would like to have another button with another icon to the right of the download button where I could choose which column to display, Colvis.

Raffe

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    You can use dom to place things around the table. You can also have fine tuning of the placement of Buttons by using the constructor as shown in this example,

    Colin

  • RaffeRaffe Posts: 8Questions: 3Answers: 0

    Hello Alan,

    I have played around with the DOM but it does not matter how I do, the serach is always at the right.

    I have tried to add another button beside the download button but I do not know how to do it when the other buttons are grouped.

    And how to make the button (excel/pdf ..) transparent? Text left?

  • RaffeRaffe Posts: 8Questions: 3Answers: 0
    edited January 2021
  • allanallan Posts: 63,161Questions: 1Answers: 10,406 Site admin
    div.dt-buttons {
      float: right !important;
      margin-left: 1em;
    }
    

    combined with dom: 'Bfrtlip' will place the download button on the right. Updated example.

    For the button styling you can override using button.dt-button - including setting the background to transparent and the border to transparent. I'm not all that sure what your intention is here though - just a list of links?

    Allan

This discussion has been closed.