Before 2.0 I could display three of the default controllers -buttons, search, and page length using the dom option:
$('#data-table').DataTable({
dom: "<'row'<'col'l><'col' B><'col'f>>t<'row'<'col'i><'col'p>",
//...
});
This effectively rendered this dom (more or less):
<div class="row">
<div class="col">{Page length control}</div>
<div class="col">{Buttons}</div>
<div class="col">{Search control}</div>
</div>
{ THE TABLE}
<div class="row">
<div class="col">{Info control}</div>
<div class="col">{Paging buttons}</div>
</div>
Check https://jsfiddle.net/g2vbru6a/23/
However when trying to do a similar thing using the layout option I can’t set three controls on the top (nor the bottom) of my table.
I’ve tried:
layout: {topStart: null, topEnd: null, top: ['info', 'buttons', 'search']},
and
layout: {topStart: ['info', 'buttons'], topEnd: 'search'},
And similar things, but it will just pile one on top of the other. If I could use bootstrap’s row and col I’d display them the same way I did with the dom option. Can you point me how?
DataTables currently not natively supports to have more than two elements equally spaced, see also the DOM Structure. However, this is possible by using a layout option similar to yours where all elements are put into a single array, e.g. into top, and then use a CSS Flexbox in order to define the spaces. Below is an example where this is applied, we obtain three equal-width sections containing the three items side by side.
$(document).ready(function() {
new $('#data-table').DataTable({
buttons: ['csv'],
layout: {
topStart: null,
topEnd: null,
top: ['pageLength', 'buttons', 'search']
},
});
});.col-md {
display: flex;
}
.col-md>* {
flex: 1;
display: flex;
align-items: center;
}
.dt-info {
justify-content: flex-start;
}
.dt-buttons.btn-group.flex-wrap {
justify-content: center;
}
.dt-search {
justify-content: flex-end;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/fh-4.0.1/sl-2.0.3/datatables.min.js"></script>
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<table id="data-table" class="table table-striped w-100">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>Row 2</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>Row 3</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody>
</table>