如何将分页集中在jQuery Bootstrap DataTables插件中？

I am using jQuery's DataTables plugin with Bootstrap 3.1 for sorting & paginating server side contents.

我正在使用带有Bootstrap 3.1的jQuery的DataTables插件来对服务器端内容进行排序和分页。

This is how my table looks like

这就是我的桌子的样子

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

Pagination & Sorting works fine...But by default pagination is on right side of the table. I want to show it on the center of the table. My knowledge in CSS is minimal, so I am not sure where to make changes. How to acheive this?

分页和排序工作正常...但默认情况下,分页位于表格的右侧。我想把它展示在桌子的中心。我对CSS的了解很少,所以我不确定在哪里进行更改。怎么实现这个?

6 个解决方案

#1

Initialize your DataTable as:

将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

None of the solutions mentioned here so far worked for me.

到目前为止,这里提到的解决方案都没有为我工作。

This is what I use:

这是我用的:

 div.dataTables_paginate {text-align: center}

The div with the class dataTables_paginate, in my layout, has a width equal to 100% of its containing div. The text-align is centering the ul control - <ul class="pagination"> contained within dataTables_paginate.

在我的布局中,带有dataTables_paginate类的div的宽度等于其包含div的100%。 text-align以ulT控件为中心 - dataTables_paginate中包含的

My "DOM" attribute is very simple. It looks like this:

我的“DOM”属性非常简单。它看起来像这样:

 "dom": 'rtp'

#3

This is based on Karl's answer, but with DataTables v1.10.12 I had to provide a few extra details in my CSS override file in order to get them to stick.

这是基于Karl的答案,但是使用DataTables v1.10.12我必须在我的CSS覆盖文件中提供一些额外的细节才能让它们坚持下去。

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

#4

I used the following to get pagination in the center of the table:

我使用以下内容在表格的中心进行分页:

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

#5

<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>

and remove the property of float:right; from class

并删除float:right的属性;来自课堂

dataTables_paginate

#6

If you are only concerned about placing the pagination in the middle of the dataTable (underneath or above), the following code should do it:

如果您只关心将分页放在dataTable的中间(在下面或上面),则以下代码应该这样做:

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

#1