How to center the pagination in jQuery Bootstrap DataTables plugin? How to center the pagination in jQuery Bootstrap DataTables plugin? jquery jquery

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}