layout option, show multiple items next to each other.

ooioo

Hello,
I was using the option with datatables 1 :
dom: 'Blftip'

I am trying :

layout: {
  topStart: ['buttons', 'pageLength', 'search'],
  topEnd: null,
  bottomStart: ['info', 'paging'],
  bottomEnd: null
},

but the items 'buttons', 'pageLength', 'search' are displayed on one new line each and not on the same line.

Pierre

allan

Hi Pierre,

Each "feature" is a div inside a container, so they are, by default in the browser, display: block. You can modify that will a little CSS - e.g.:

div.dt-container div.dt-layout-cell.dt-start {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

Here is that with your layout object: https://live.datatables.net/zewetoki/1/edit .

Allan

ooioo

Thanks Allan for this help, but I'm using Bootstrap, and I do have a div with a class dt-container but no dt-layout-cell.dt-start class.
I have a test case here :
http://wikipanda.free.fr/datatables/dt2layout/
It includes datatables 2, jquery 3.7.1 and Bootstrap 5.3.3.

Pierre.

allan

Thank you for the link. You just need to tweak the selector a little and add flex: 1:

div.dt-container > div.row > div.col-md-auto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex: 1;
}

Allan

ooioo

Yes it works, but not on a small screen.
The test case has now the above css :
http://wikipanda.free.fr/datatables/dt2layout/
If you shrink your browser you'll see !

allan

Okay, well you need to add a responsive CSS rule to make it display: block when the browser width is whatever width you want when want it to collapse.

See this section in MDN on how to do that.

ooioo

Hi,
thanks for the link Allan, mdn is great.

To replace datatables dom option for the Buttons with Bootstrap 5, I have created a div and added it to the div containing datatables 'pageLength' and 'search'.

colButton = document.createElement("div");
colButton.classList.add('col-md-auto', 'ms-auto', 'xx');         
parentDOM = document.getElementById('example_wrapper');
topRow = parentDOM.getElementsByClassName('row mt-2')[0];
topRow.prepend(colButton);
table.buttons().container().appendTo( '.xx' );

Can be enhanced of course but it works. When I click on the pdf Button, the pdf is ok but there is an error :

Uncaught TypeError: n is not a function
    action http://wikipanda.free.fr/datatables/dt2layoutappend/datatables.min.js:57
    action http://wikipanda.free.fr/datatables/dt2layoutappend/:23
    a http://wikipanda.free.fr/datatables/dt2layoutappend/datatables.min.js:37
    r http://wikipanda.free.fr/datatables/dt2layoutappend/datatables.min.js:37

and the PDF button is replaced with a waiting animation.

Test case here :
http://wikipanda.free.fr/datatables/dt2layoutappend/

Bye.
Pierre.

blankse

Hi,

i also want multiple items next to each other. I use bootstrap 5. Is it possible to add classNames to this divs? I see the renderer have a option for id/className. But I don't find a solution to add it.
https://github.com/DataTables/DataTablesSrc/blame/dfef3dfcd36bbb30e858b1361fb6a5c1fd64e3db/js/integration/dataTables.bootstrap5.js#L201

How can I add this className/id? Can you provide a example?

allan

For a specific item? Currently no, that isn't possible. What code are you currently using?

Allan

blankse

Currently I use following dom and want it to migrate to layout:

options.dom = "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
    "<'row dt-row'<'col-sm-12'tr>>" +
    "<'d-flex flex-wrap justify-content-between mt-2'<'alphabet-search'><'flex-break d-xxl-none'><'d-flex'i><'justify-content-center'p>>"

Maybe we can support following settings in the future?

options.layout.bottom = {
    className: 'd-flex flex-wrap justify-content-between',
    contents: [createAlphabet, 'info', 'paging'],
};

Or is it possible to create the info/paging in a custom layout function? So I can create the divs myself?

allan

For that, would you use:

layout: {
  topStart: 'pageLength',
  topEnd: 'search',
  bottom: 'alphabetSearch',
  bottomStart: 'info',
  buttomEnd: 'paging'
}

Or, since most of that is the default, use simply:

layout: {
  bottom: 'alphabetSearch'
}

Allan

blankse

Hi Allan,

no this is not the same. bottom is over bottomStart/bottomEnd.

Before:

After:

Sebastian

allan

Oh I see - use:

layout: {
  bottomStart: null,
  bottomEnd: null,
  bottom: [
    'alphabetSearch',
    'info',
    'paging'
  ]
}

And the CSS (assuming it is BS5):

div.dt-container div.row:last-child > div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-content: center;
}

https://live.datatables.net/wekurica/1/edit

That said, I agree - I think it should be possible to add classes to the layout grid from the layout object. That will go into DataTables 2.1.

Allan

blankse

Hi Allan,

okay thank you.

Sebastian