bootstrap 5, searchBuilder button using dom, missing bootstrap rows/classes, alignment issue

bootstrap 5, searchBuilder button using dom, missing bootstrap rows/classes, alignment issue

mrsman2mrsman2 Posts: 7Questions: 3Answers: 0

Link to test case: https://codepen.io/ddmee/pen/WNjORdX
Debugger code (debug.datatables.net): None.
Error messages shown: None.
Description of problem:

If you take a look at the test case, you can see that the Search Builder button, the row limit and the search bar are not wrapped in bootstrap rows/colums. This seems to be wrong to me? I was hoping the dom layout would include bootstrap markup. The javascript that generates this is:

$(document).ready(function() {
    $('#example').DataTable({
      buttons: ['searchBuilder'],
      dom: 'Blfrtip'
    });
} );

However, if I remove the use of the 'dom' option, so the javascript becomes:

$(document).ready(function() {
    $('#example').DataTable({
    });
} );

Then the row limit and search bar are wrapped in bootstrap rows/columns. (Which seems good to me.) Another code pen showing this result is here: https://codepen.io/ddmee/pen/WNjORyM

Is there something about setting the 'dom' option that eliminates the styling libraries support for bootstrap?

Per the documentation at https://datatables.net/reference/option/dom "The styling libraries that DataTables supports will override the default value of the dom parameter and replace it with a value that is suitable for their layout system. " Does that mean if I set the dom option, and if I want to retain bootstrap styling, I must set the dom option to something like?:

$(document).ready(function() {
    $('#example').DataTable({
      buttons: ['searchBuilder'],
      dom: '"<'row'<'col-sm-12 col-md-3'l><'col-sm-12 col-md-5'B><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    });
} );

(Example of that here https://codepen.io/ddmee/pen/wvdegYP)

Sorry if the question is unclear.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    The styling libraries that DataTables supports will override the default value of the dom parameter and replace it with a value that is suitable for their layout system.

    What that means is if you choose a styling integration like Bootstrap 5 and don't use the dom option the dom styling configuration example shown will be used. If you want to customize the `-option dom option then yes you should start with the proper example as a base then modify as desired.

    To add buttons you can use the Dirct insertion method instead of the dom option.

    Does this answer your questions?

    Kevin

  • mrsman2mrsman2 Posts: 7Questions: 3Answers: 0
    edited July 2021

    `-option dom option then yes you should start with the proper example as a base then modify as desired.

    Sorry I don't know what you mean. What is the proper example?

    I had tried using searchBuilder without buttons.

    The documentation suggested (https://datatables.net/extensions/searchbuilder/examples/initialisation/simple) using the dom option with Q like so:

    $(document).ready(function() {
        $('#example').DataTable({
          dom: 'Qlfrtip'
        });
    } );
    

    But that has the same issue. The bootstrap styling is gone.

    So I guess my question is; how do I use searchBuilder properly so that it retains the bootstrap 5 styling?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited July 2021 Answer ✓

    Sorry I'm unable to save the codepen but something like this maybe?

          dom: "<'row'<'col-sm-12 col-md-3'Q><'col-sm-12 col-md-5'l><'col-sm-12 col-md-4'f>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    

    The idea of the dom option is to use the Bootstrap grid system to layout the elements.

    Kevin

  • mrsman2mrsman2 Posts: 7Questions: 3Answers: 0

    Thanks for the response Kevin.

Sign In or Register to comment.