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

mrsman2

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.

kthorngren

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

mrsman2

`-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?

kthorngren

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

mrsman2

Thanks for the response Kevin.