如何在 jQuery Bootstrap DataTables 插件中居中分頁？

Question

我正在使用 jQuery 的 DataTables 插件和 Bootstrap 3.1 對服務器端內容進行排序和分頁。

這是我的桌子的樣子

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

分頁和排序工作正常...但默認情況下，分頁位於表格的右側。 我想把它展示在桌子的中央。 我對 CSS 的了解很少，所以我不確定在哪里進行更改。 如何實現這一目標？

Answer 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>>>'
    });

});

Answer 2

到目前為止，這里提到的所有解決方案都不適合我。

這是我使用的：

 div.dataTables_paginate {text-align: center}

在我的布局中，類dataTables_paginate的div的寬度等於其包含 div 的 100%。 text-align ul控件居中 - <ul class="pagination">包含在dataTables_paginate 。

我的"DOM"屬性非常簡單。 它看起來像這樣：

 "dom": 'rtp'

Answer 3

這是基於 Karl 的回答，但是對於 DataTables v1.10.12，我必須在我的 CSS 覆蓋文件中提供一些額外的細節才能讓它們堅持下去。

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

Answer 4

我使用以下內容在表格中心獲得分頁：

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

Answer 5

這為我解決了它（引導程序 4）：

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

Answer 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;的屬性float:right; 從課堂上

dataTables_paginate

Answer 7

如果您只關心將分頁放在 dataTable 的中間（下方或上方），則應使用以下代碼：

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

Answer 8

這對我有用：

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

Answer 9

如果您不希望所有分頁都居中。 這是解決方法。

CSS

<style>
        .dt-center .pagination {
            justify-content: center !important;
        }
</style>

數據表

<"dt-center"p>

Answer 10

我所做的是：style.css line 2731

.dataTables_wrapper .dataTables_paginate .paginate_button {
width: 50px; //def:35px;
height: 30px; //def:35px;
border-radius: 10%; //def:50%;
background-color: #f1f1f1;
vertical-align: top;
color: #7E7E7E!important;
margin: 0 2px;
border: 0!important;
line-height: 17px; //def:21px;
box-shadow: none!important; }

數字將居中