How to center the pagination in jQuery Bootstrap DataTables plugin?
Initialize your DataTable as:
$(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>>>' });});
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
.
My "DOM"
attribute is very simple. It looks like this:
"dom": 'rtp'
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.
div.dataTables_info {position:absolute}div.dataTables_wrapper div.dataTables_paginate {float:none; text-align:center}