I am utilizing bootstrap 4, thymeleaf, and datatable
I attempted to place a button on top of the table to the right
<div class="col-sm-12">
<div class="float-right">
<button id="newUsers" type="button" th:onclick="@{/newusers}" class="btn btn-primary" th:text="#{user.new}">New User</button>
</div>
</div>
I used col-sm-12 to occupy all available space
<table id="usersTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th th:text="#{user.id}">Id</th>
<th th:text="#{user.login}">Login</th>
<th th:text="#{user.firstname}">Firstname</th>
<th th:text="#{user.lastname}">LastName</th>
<th th:text="#{user.roles}">Roles</th>
</tr>
</thead>
</table>
https://i.sstatic.net/QLXdK.png
The button is not aligned correctly with the text box
Edit: Added code to initialize the table
$(document).ready(function() {
var url = "/users";
$('#usersTable').DataTable({
"bLengthChange": false,
'processing': true,
'serverSide': true,
'pagingType': 'simple_numbers',
'ajax': {
type: 'get',
'url': url,
'data': function(d) {
var current = $('#usersTable').DataTable();
d.page = (current != undefined) ? current.page.info().page : 0;
d.size = (current != undefined) ? current.page.info().length : 5;
d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
}
},
"columns": [{
"data": "id"
},
{
"data": "username"
},
{
"data": "firstname"
},
{
"data": "lastname"
},
{
"data": "username"
}
]
});
});
Even with the suggested solution, the button alignment needs adjustment in conjunction with the datatable
Edit 2
To achieve better integration, considering these extensions could provide a viable solution
https://datatables.net/extensions/buttons/examples/initialisation/custom.html