Assistance migrating "dom" option to "layout" option - inject control into custom div

Assistance migrating "dom" option to "layout" option - inject control into custom div

zepernickzepernick Posts: 34Questions: 8Answers: 0

Currently, we are using the dom option with some Bootstrap 5 div markup which ends up hiding some of the features in smaller resolutions. Here is our current dom settings:

dom:
        "<'row'<'col-sm-9'<'hidden-xs'lM>><'col-sm-3'<'float-end'BC>>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>"

Specifically, I'm trying to hide the length (l) and Message (M) on the xs breakpoint using the new layout option. I see the div feature which looks like it would work, but how do I inject the "pageLength" control into the div? I only see options to add my own custom text/html into the div.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 64,829Questions: 1Answers: 10,731 Site admin
    Answer ✓

    Hi,

    You need to use the className option for a features object as explained here. There is an example here which might be useful.

    For example:

    new DataTable('#example', {
        layout: {
            topStart: {
              className: 'd-none d-sm-block',
              features: 'pageLength'
            }
        }
    });
    

    will hide the length menu in Bootstrap 5 on small screens ( https://live.datatables.net/paqipigi/1/edit ).

    Allan

  • zepernickzepernick Posts: 34Questions: 8Answers: 0

    Perfect, thank you so much! Apparently I was complicating the solution.

    Paul

Sign In or Register to comment.