Wrap Table Header Buttons

AlexanderLamas

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!

allan

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

AlexanderLamas

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

AlexanderLamas

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

allan

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