如何在右侧修复数据表搜索框和分页？

Question

默认情况下，数据表中的搜索和分页控件显示在中心位置。我希望它们与数据表文档中的位置保持一致

$(document).ready(function() {
  $('#example').DataTable();
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<div class="box-body">
  <table id="example" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Partner Category/Partner Group</th>
        <th>Created At</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

Answer 1

数据表构造函数中有一个名为dom的属性，可用于为数据表指定不同的选项，例如分页，搜索输入等。 可用的内置选项为：

l - Length changing
f - Filtering input
t - The Table!
i - Information
p - Pagination
r - pRocessing
< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class

要操纵搜索输入，您可以使用类或ID将其包装，并借助CSS来实现所需的定位。像这样

$(document).ready(function() {
    $('#example').DataTable( {
        "dom": '<"search"f>i'
    } );
} );