How to center the pagination in jQuery Bootstrap DataTables plugin?

Question

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

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?

Answer 1

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

});

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

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

 "dom": 'rtp'