Question

我使用bootstrap 4，thymeleaf和datatable

在右边的桌子上，我尝试按下按钮

 <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}">Nouveau utilisateur</button>
     </div>
 </div>

我用col-sm-12占用了所有空间

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

就像你看到的那样，按钮不是正确的

编辑：将代码添加到init表

    $(document).ready(function() {
    var url = "/users";
    $('#usersTable').DataTable({
        "bLengthChange": false, //hide 'show entries dropdown
        '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;
                //return JSON.stringify( d );
            }
        },
        "columns": [{
                "data": "id"
            },
            {
                "data": "username"
            },
            {
                "data": "firstname"
            },
            {
                "data": "lastname"
            },
            {
                "data": "username"
            }
        ]
    });
});

无论如何提出解决方案，但是没有对齐文本框，需要检查数据表

编辑2

为了增加更好的集成，这个扩展可以是一个解决方案

https://datatables.net/extensions/buttons/examples/initialisation/custom.html

Answer 1

float-right应该在按钮上......

<div class="col-sm-12">
     <button id="newUsers" type="button" class="btn btn-primary float-right">Nouveau utilisateur</button>
</div>

Answer 2

如果你按照你说的那样给它100％的宽度并将它对齐，它应该会出现在屏幕最右边的例子中：

＆＃13;

.col-sm-12 {
  width: 100%;
  text-align: right;
}

＆＃13;

<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}">Nouveau utilisateur</button>
  </div>
</div>
<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>

＆＃13;

按钮没有放在正确的位置

2 个答案: