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

washuit-iamm

Second this feature.

I am really surprised layout is row-only (aside from Start/End).

Ideally, layout would be (top|bottom)[0-9][0-9]? where the second number is simply the column.

allan

It is a good idea and I'll keep it in mind for the future.

2.1 will see the array based columns added as discussed above.

Allan

m0nst3r

@allan I ran across this issue as well, and solved it similar to your method, but it definitely felt like a hack. At least with bootstrap5 I recommend not only allowing users to set classes (as mentioned above), but actually adding one or more classes (like dt-center) to the parent so you can more easily modify the direct container (.col-md in this case.

The layout "top" and "bottom" without a start/end centers the entire div content by default (justify-content-md-center), where as the start/end use justify-content-between. Perhaps also think if that is an intended inconsistency by default.

sinfuljosh

This also works if you are only applying it to some of your datatables.

https://live.datatables.net/wekurica/16/

using the same starting point. I applied the bs5 classes on draw. Just looked for the element I was adding (alphabet, or dt-info, etc) and applied to parent. With adjustments to padding and margins on other elements. (ps. why does one pad the top and the other the bottom???)

var table = new DataTable('#example', {
  layout: {
    bottomStart: null,
    bottomEnd: null,
    bottom: [
      'alphabetSearch',
      'info',
      'paging'
    ]
  }
});

you can add these classes on draw.

table.on( 'draw', function () {
$('div.alphabet').parent().addClass('d-flex flex-row align-items-center justify-content-between');
$('div.dt-info').addClass('pt-0');
$('div.alphabet').addClass('mb-0');
} );

sinfuljosh

I didnt need the full alphabet search in mine but wanted to combine the dropdown page and the info. So I did this for anyone wanting the same.

Added to my table.

        layout: {
            topStart: {
                buttons: [
                    {
                        text: 'Create new record',
                        action: function () {
                            // Create new record
                            editor.create({
                                title: 'Create new record',
                                buttons: 'Add'
                            });
                        }
                    }
                ]
            },
            bottomStart: ['pageLength','info'],
            buttomEnd: 'paging'
        },

And on draw.

    table.on( 'draw', function () {
        $('div.dt-buttons').addClass('btn-group-sm');
        $('div.dt-length').parent().addClass('d-flex flew-row align-items-center');
        $('div.dt-info').addClass('ms-5 pt-0');
    } );