Basic init causes dataTables_length & dataTables_filter to be in row & col-sm-6

Capamania

I have a very basic and a advanced datatable running. In the basic one dataTables_length & dataTables_filter are each embedded in col-sm-6 what I don't want. What causes this effect and how to get rid of?

<div id="table01_wrapper class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div class="row">
        <div class="col-sm-6">
            <div id="table01_length" class="dataTables_length"></div>
        </div>
        <div class="col-sm-6">
            <div id="table01_filter" class="dataTables_filter"></div>
        </div>
    </div>
</div>

With basic init:

$('#table01').dataTable();

But what I want is the setup like in the advance table this:

<div id="table02_wrapper class="dataTables_wrapper form-inline dt-bootstrap no-footer">
    <div id="table02_length" class="dataTables_length"></div>
    <div id="table02_filter" class="dataTables_filter"></div>
</div>

With advanced init:

$('#table01').dataTable({
    dom: "Blfrtip",
    buttons: [{...}]
    ajax: {...},
    columns: [{...}]
    serverSide: true,
    processing: true,
    ...
});

Many thanks

tangerine

What causes this effect and how to get rid of?

Your "basic init" code is not creating the HTML.
Where is your HTML coming from? It seems to be using Bootstrap styling.

allan

In the basic one dataTables_length & dataTables_filter are each embedded in col-sm-6 what I don't want. What causes this effect and how to get rid of?

You are probably seeing the default value that is used in the Bootstrap initialisation for the dom parameter. The dom documentation shows the default for the Bootstrap integration.

Allan

Capamania

Thanks Allan. With ... defining dom: 'Bflrtip', I'm back to my setup.

Best Regards