Wrap Table Header Buttons

Wrap Table Header Buttons

AlexanderLamasAlexanderLamas Posts: 58Questions: 1Answers: 0

Hi guys,

When you have added buttons in the header of your table, you would have something like this

<div class="dt-buttons">   
    <button class="dt-button" tabindex="0" aria-controls="example" type="button">
        <span>My button 1</span>
    </button> 
    <button class="dt-button" tabindex="0" aria-controls="example" type="button">
        <span>My button 2</span>
    </button> 
    <button class="dt-button" tabindex="0" aria-controls="example" type="button">
        <span>My button 3</span>
    </button> 
</div>

How can I wrap ONLY the buttons 1 and 2 in a div?

This is what I want to achieve

<div class="dt-buttons">   
    <div class="SpecialButtons">
        <button class="dt-button" tabindex="0" aria-controls="example" type="button">
            <span>My button 1</span>
        </button> 
        <button class="dt-button" tabindex="0" aria-controls="example" type="button">
            <span>My button 2</span>
        </button> 
    </div>
    <button class="dt-button" tabindex="0" aria-controls="example" type="button">
        <span>My button 3</span>
    </button> 
</div>

Thank you very much!

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    There isn't currently a way to do that in Buttons I'm afraid. It should be possible to use jQuery / DOM methods to "wrap" the button elements, but that isn't something I've actually tried.

    Allan

  • AlexanderLamasAlexanderLamas Posts: 58Questions: 1Answers: 0

    Hi Allan,

    Thanks for your reply.
    I will try to use jQuery methods to achieve that.
    Let's what I can come up with. :)

    Thank you!

    Regards,
    Alex

  • AlexanderLamasAlexanderLamas Posts: 58Questions: 1Answers: 0

    Hi Allan,

    Thanks for your reply.

    Another idea...

    Is it possible to add a button in the same header section after the table API is fully loaded?

    I was thinking of that I could add a class for the buttons I want to wrap and after the API is been loaded I added the button that won't be wrapped.

    Please let me know if that is possible, and, if you can, please give some examples or some links where I can see how to achieve that.

    Thank you very much.

    Regards,
    Alex

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Is it possible to add a button in the same header section after the table API is fully loaded?

    Yes - button().add() can be used to add a button.

    Allan

This discussion has been closed.