如何在 jQuery Bootstrap DataTables 插件中居中分页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24401177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center the pagination in jQuery Bootstrap DataTables plugin?
提问by Lonewolf
I am using jQuery's DataTables plugin with Bootstrap 3.1 for sorting & paginating server side contents.
我正在使用 jQuery 的 DataTables 插件和 Bootstrap 3.1 对服务器端内容进行排序和分页。
This is how my table looks like
这是我的桌子的样子
http://datatables.net/manual/styling/bootstrap-simple.html
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 的了解很少，所以我不确定在哪里进行更改。如何实现这一目标？
回答by Khalid T.
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>>>'
});
});
回答by Karl
None of the solutions mentioned here so far worked for me.
到目前为止，这里提到的所有解决方案都不适合我。
This is what I use:
这是我使用的：
div.dataTables_paginate {text-align: center}
The divwith the class dataTables_paginate, in my layout, has a width equal to 100% of its containing div. The text-alignis centering the ulcontrol - <ul class="pagination">contained within dataTables_paginate.
在div与类dataTables_paginate，在我的布局，具有宽度等于其包含分区的100％。将控件text-align居中ul-<ul class="pagination">包含在dataTables_paginate.
My "DOM"attribute is very simple. It looks like this:
我的"DOM"属性很简单。它看起来像这样：
"dom": 'rtp'
回答by Jason Rukman
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'
});
回答by Kidquick
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}
回答by Rmy5
This solved it for me (bootstrap 4):
这为我解决了它（引导程序 4）：
.dataTables_paginate {
width: 100%;
text-align: center;
}
回答by Ahmed Numaan
This worked for me:
这对我有用：
<style>
.pagination{
display: inline-flex;
}
div.dataTables_wrapper div.dataTables_paginate{
text-align: center;
}
</style>
回答by Bluetree
If you don't want all pagination to be centered. Here's the workaround.
如果您不希望所有分页都居中。这是解决方法。
CSS
CSS
<style>
.dt-center .pagination {
justify-content: center !important;
}
</style>
DataTable
数据表
<"dt-center"p>
回答by Azhuda
what i did is : style.css line 2731
我所做的是：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; }
the number will center at middle
数字将居中
回答by J Prakash
<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
dataTables_paginate
回答by user2325727
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%;
}
