Как центрировать разбиение на страницы в плагине JQuery Bootstrap DataTables?

Я использую плагин jQuery DataTables с Bootstrap 3.1 для сортировки и разбивки содержимого на стороне сервера.

Вот как выглядит моя таблица

http://datatables.net/manual/styling/bootstrap-simple.html

Разбивка страниц и сортировка отлично работают... Но по умолчанию разбиение на страницы находится на правой стороне таблицы. Я хочу показать его в центре стола. Мои знания в CSS минимальны, поэтому я не знаю, где внести изменения. Как добиться этого?

Ответы

Ответ 1

Инициализируйте свой DataTable как:

$(document).ready(function () {

    /* DataTables */
    var myTable = $("#myTable").dataTable({
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>'
    });

});

Ответ 2

Ни одно из решений, упомянутых здесь до сих пор, не работало для меня.

Это то, что я использую:

 div.dataTables_paginate {text-align: center}

div с классом dataTables_paginate, в моем макете, имеет ширину, равную 100% от содержащего div. text-align центрирует элемент управления ul - <ul class="pagination">, содержащийся в dataTables_paginate.

Мой атрибут "DOM" очень прост. Это выглядит так:

 "dom": 'rtp'

Ответ 3

Это основано на ответе Karl, но с DataTables v1.10.12 я должен был предоставить несколько дополнительных деталей в моем файле переопределения CSS, чтобы заставить их придерживаться.

div.dataTables_info {position:absolute}
div.dataTables_wrapper div.dataTables_paginate {float:none; text-align:center}

Ответ 4

Я использовал следующее, чтобы получить разбиение на страницы в центре таблицы:

$('table').DataTable({
   "dom": '<"row"<"col-sm-4"l><"col-sm-4 text-center"p><"col-sm-4"f>>tip'
});

Ответ 5

Это решило это для меня (начальная загрузка 4):

.dataTables_paginate {
  width: 100%;
  text-align: center;
}

Ответ 6

<div class="row">
   <div class="col-xs-4">
   </div>
   <div class="col-xs-8">
         <div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
         </div
   </div>
</div>

и удалите свойство float:right; из класса

dataTables_paginate

Ответ 7

Если вы беспокоитесь о размещении страницы в середине таблицы данных (снизу или выше), следующий код должен сделать это:

.dataTables_paginate {
    margin-top: 15px;
    position: absolute;
    text-align: right;
    left: 50%;
}

Ответ 8

Это сработало для меня:

<style>
.pagination{
    display: inline-flex;
}
div.dataTables_wrapper div.dataTables_paginate{
    text-align: center;
}
</style>