web-dev-qa-db-ja.com

jQueryでページ分割を中央に配置する方法Bootstrap DataTablesプラグイン？

Bootstrap 3.1）でjQueryのDataTablesプラグインを使用して、サーバー側のコンテンツのソートとページ付けを行っています。

これは私のテーブルがどのように見えるかです

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

ページネーションと並べ替えは正常に機能します...しかし、デフォルトではページネーションはテーブルの右側にあります。テーブルの中央に見せたいです。 CSSに関する私の知識は最小限なので、どこに変更を加えるかわかりません。これを達成する方法は？

jquerycsstwitter-bootstrappaginationdatatables
14
Lonewolf

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

});
19
Khalid T.

ここで述べた解決策のいずれも、私にとってはうまくいきませんでした。

これは私が使用するものです：

 div.dataTables_paginate {text-align: center}

私のレイアウトでは、クラスdataTables_paginateを含むdivの幅は、含まれているdivの100％です。 text-alignは、<ul class="pagination">内に含まれるulコントロール-dataTables_paginateを中心としています。

私の"DOM"属性は非常に単純です。次のようになります。

 "dom": 'rtp'
9
Karl

次のコードを使用して、テーブルの中央でページ分割を取得しました。

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

これはKarlの回答に基づいていますが、DataTables v1.10.12では、CSSオーバーライドファイルにいくつかの追加の詳細を提供して、それらを固定させる必要がありました。

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

これは私のためにそれを解決しました（ブートストラップ4）：

.dataTables_paginate {
  width: 100%;
  text-align: center;
}
1
Rmy5
<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
J Prakash

これは私のために働きました：

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

ページネーションをdataTableの真ん中（下または上）に配置することのみを懸念している場合は、次のコードでそれを行う必要があります。

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

すべてのページネーションを中央に配置したくない場合。これが回避策です。

[〜＃〜] css [〜＃〜]

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

DataTable

<"dt-center"p>
0
Bluetree

私がしたことは：style.css行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; }

数字は中央に配置されます

0
Azhuda