lengthmenu and search location not in the same line?

tomscope

After add button 'copy', 'csv', 'print' etc to dataTable, the table lengthmenu and search box's location had been changed. It like two div box one float to left in the first line, and the second float to right in the second line. The info and paginate under the table was also like that. It shows in the picture below. Is there anyone who met that before?

I set the dom: 'Blfrtip' in js script to show length menu and export buttons. dataTables's version is 1.10.18.

colin

Hi @tomscope ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

tomscope

Hi, @colin
I tested the example in https://datatables.net/extensions/buttons/examples/styling/bootstrap.html, and the result was like below.
http://live.datatables.net/qufuberu/3/edit
It's the same with the situation that I met before.

allan

The key issue here is that dom for Bootstrap is actually relatively complex in order to display the elements in a Bootstrap layout - see the dom option docs for the default.

Here is a modification to your example to make it work: http://live.datatables.net/qufuberu/5/edit . I've also used pageLength in the Buttons to have that display a little nicer.

Allan

tomscope

@allan Dear administrator, your code worked fine in my test page. But I met another error when I initial the table data from ajax, the buttons all disappaed. After I comment out the "ajax" line, buttons appeard.
I am really confused by this, can you give me some suggestions?

allan

Yes - put your Buttons initialisation into initComplete. The issue with ajax is that it is asynchronous - the table is initialised before the data is loaded. initComplete is a callback for when the data is fully loaded.

Allan

vesaldiy

Hey Allan, continuing about the Tomscope question. I still haven't found the buttons of Dom (excel, pdf, pageLength) to appeared again, I've used initComplete but it can't. Please help, show the example with this link http://live.datatables.net/qufuberu/5/edit (it's your code), but using initComplete. Thanks.

kthorngren

You might need to use this.api() instead of the variable table inside initComplete. See this example:
http://live.datatables.net/qufuberu/153/edit

Kevin