DataTables make the pagination and display counts appear at the top

Question

When using the DataTables plugin

How would I make the paging and the Showing 1 to 8 of 8 entries appear at the top rather than the bottom?

Thanks

Answer 1

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/

Answer 2

just add dom property in option as lfrtip to lfript

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

this will move the info and pagination on the top of the table

see the documentation https://datatables.net/reference/option/dom

Answer 3

I may be late, but I found the below code more suitable and can be customized based on our needs using the dataTable dom options

$('#example').dataTable( {
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

Reference Link - https://datatables.net/reference/option/dom