Display the buttons outside the parent container

duttakirtiman

Hi Can anyone tell me how can i display my buttons just outside the parent table contaner?
I have provided a test case where i have coloured the entire container with id="aftertable" in grey.
I need to display the table just outisde this container.

Here is the link to my test case: http://live.datatables.net/zugefipi/1/edit

duttakirtiman

I used to use insertAdjacentElement(position, element) and afterend position before. But i dont know how we are inserting the buttons here.

Here is a link for the afterend reference https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

kthorngren

Create a div where you want the buttons and ese the Direct insertion method like this:
http://live.datatables.net/zugefipi/1/edit

Kevin

duttakirtiman

Hi Kevin,Sorry i couldnt understand the result you were trying in the test case link that you shared in the previous comment.
Also direct insertion method can be used for newly created buttons/custom buttons.

I want my pagenumber buttons to appear outside.

kthorngren

Sorry when someone just says buttons I assume they mean the Buttons extension. You can use jQuery appendTo() o move the paging element. I added a div after the table in this example:
http://live.datatables.net/zugefipi/2/edit

I noticed the styling is lost. Using the browser's inspect tool I see the selectors include .dataTables_wrapper, for example:

.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.5em;
}

I added this class to the new div for the styling to work.

Kevin