layout option, show multiple items next to each other.

layout option, show multiple items next to each other.

ooiooooioo Posts: 23Questions: 4Answers: 0

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

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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 !

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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.

  • ooiooooioo Posts: 23Questions: 4Answers: 0

    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.

  • blankseblankse Posts: 8Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

  • blankseblankse Posts: 8Questions: 1Answers: 0
    edited 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?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • blankseblankse Posts: 8Questions: 1Answers: 0

    Hi Allan,

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

    Before:

    After:

    Sebastian

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • blankseblankse Posts: 8Questions: 1Answers: 0

    Hi Allan,

    okay thank you.

    Sebastian

  • washuit-iammwashuit-iamm Posts: 121Questions: 51Answers: 2

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • m0nst3rm0nst3r Posts: 4Questions: 1Answers: 0

    @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.

Sign In or Register to comment.