Как центрировать разбиение на страницы в плагине jQuery Bootstrap DataTables?
Я использую плагин DataTables jQuery с Bootstrap 3.1 для сортировки и разбиения на страницы содержимого на стороне сервера.
вот как выглядит мой стол
http://datatables.net/manual/styling/bootstrap-simple.html
разбивка на страницы и сортировка работает нормально...Но по умолчанию разбиение на страницы находится в правой части таблицы. Я хочу показать его в центре стола. Мои знания в CSS минимальны, поэтому я не уверен, где вносить изменения. Как достичь это?
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>>>'
});
});
ни одно из решений, упомянутых здесь, до сих пор не работало для меня.
это то, что я использую:
div.dataTables_paginate {text-align: center}
на div
класс dataTables_paginate
, в моем макете, имеет ширину, равную 100% его содержащего div. The text-align
- это центрирование ul
управления - <ul class="pagination">
содержится в dataTables_paginate
.
мой "DOM"
атрибут очень прост. Выглядит это так:
"dom": 'rtp'
я использовал следующее, Чтобы получить разбиение на страницы в центре таблицы:
$('table').DataTable({
"dom": '<"row"<"col-sm-4"l><"col-sm-4 text-center"p><"col-sm-4"f>>tip'
});
это основано на ответе Карла, но с DataTables v1.10.12 я должен был предоставить несколько дополнительных деталей в моем файле переопределения CSS, чтобы заставить их придерживаться.
div.dataTables_info {position:absolute}
div.dataTables_wrapper div.dataTables_paginate {float:none; text-align:center}
<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
Если вы беспокоитесь только о размещении разбиения на страницы в середине dataTable (внизу или выше), следующий код должен это сделать:
.dataTables_paginate {
margin-top: 15px;
position: absolute;
text-align: right;
left: 50%;
}