Layout question buttons, search

lenamtl

Hi,

I'm having a layout question.

Right now I have (default layout settings) all the buttons and options are located on top of the table except pagination.
a row for button
under it another row for page selection
under it another row for search

and elsewhere on the page another row for reset table button

Is there a way to put all these on the same row or on 2 rows to save room?
using pull right for example

Note I don't want the reset button attached to the button group.

I saw this https://datatables.net/examples/basic_init/dom.html
but I don't understand how it's work

Thanks

bindrid

if set up right, controls are put in the same row, some at the top, some at the bottom.
If you have what appears controls set up at the bottom in multiple rows, it sounds like something is missing.

The dom page provides a way to generate css containers, etc to control what is were and is well worth understanding and playing with if you want other than default settings.

Tell us what sort of layout you are looking for and we can make some suggestions.

lenamtl

Hi, I forgot to mention that I'm using Bootstrap 3 version.
The actual dom is Blfrtip

I have inspected the code, all most all div have this CSS display: inline-block;
so this is why they are on different row

What I want is
Button ------------------------------------------------------------- Reset table
Page length ----------------------------------------------------- Search
-------------------------------------Table -------------------------------------------
Information ------------------------------------------------------------------------
------------------------------------------------------------------------ Pagination

What I have
outside the datatables div ------ Reset table

Button ------------------------------------------------------------------------------
----------------------------------------------------------------------------- Page length
----------------------------------------------------------------------------- Search
-------------------------------------Table -------------------------------------------
Information ------------------------------------------------------------------------
------------------------------------------------------------------------ Pagination

allan

You'll need to use a relatively complex dom statement if you are using Bootstrap 3. The dom documentation shows the Bootstrap 3 default and you can modify that to suit your needs.

Allan

lenamtl

Ok thanks I got it

I thought that this was already set per default when using Datatables Bootstrap version.

I added reset button using these instructions
https://datatables.net/examples/advanced_init/dom_toolbar.html