DataTables make the pagination and display counts appear at the top

datatables

Solution

Every datatable control is named with unique `id`'s after the scheme `<tableid>_info`, `<tableid>_pagination` and so on. So they are easy to locate and then move around.

If you have a table `#example` you would perhaps initialize the dataTable like this :

var dataTable = $('#example').dataTable({
    sPaginationType: "full_numbers"
})

and after that, move the controls to above the table like this :

$("#example_info").detach().prependTo('#example_wrapper');
$("#example_paginate").detach().prependTo('#example_wrapper');

And for avoiding that the two controls are misaligned vertically :

#example_info {
    clear: none;
}

see working fiddle -> http://jsfiddle.net/C6CWE/

Problem

Original source