layout option, show multiple items next to each other.

ooioo · February 20

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 · February 21

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 · February 21

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 · February 21

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 · February 21

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 · February 21

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 · February 26

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 · March 1

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 · March 1

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

Allan

blankse · March 1

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 · March 4

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 · March 5

Hi Allan,

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

Before:

After:

Sebastian

allan · March 5

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 · March 5

Hi Allan,

okay thank you.

Sebastian

washuit-iamm · May 10

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 · May 10

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 · May 10

@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 · June 7

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 · June 7

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');
    } );

layout option, show multiple items next to each other.

layout option, show multiple items next to each other.

Answers

Howdy, Stranger!

Categories

DataTables

layout option, show multiple items next to each other.

layout option, show multiple items next to each other.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables