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

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

вот как выглядит мой стол

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

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

9
css datatables jquery pagination twitter-bootstrap

6 ответов

инициализируйте 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>>>'
    });

});
16

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

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

 div.dataTables_paginate {text-align: center}

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

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

 "dom": 'rtp'
9

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

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

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

div.dataTables_info {position:absolute}
div.dataTables_wrapper div.dataTables_paginate {float:none; text-align:center}
1
<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

0

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

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