Как исправить окно поиска в datatables и нумерацию страниц вправо?

Question

По умолчанию элементы управления поиском и разбиением на страницы в datatable отображаются в центре. Я хочу, чтобы они были в правильном положении, как показано в документации по datatables

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

Для манипулированияВ поисковом вводе вы можете обернуть его с помощью класса или идентификатора, а с помощью CSS вы можете достичь желаемого положения.Вот так

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