jQuery Datatables show page numbers at top

Question

I am using jQuery Datatables with pagination numbers at the bottom of the table. However, I would like to move it to the top since when the page numbers are changes, because of the amount of data (also iDisplayLength set as 100), user requires to scroll at the top everytime, which is annoying.

Here is my code:

     $(function() 
     {
      oTable = $('#example').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 100,
        "sDom": '<"top"<"actions">fpi<"clear">><"clear">rt<"bottom">',
    });
});

This seems to work, but it removes my 'Show entries' drow-down, where I give an option for someone to select number of entries to show on page and also removes my styles.

I think you are missing the `l` (of length), try `lfpi`. [DataTables sDom](http://datatables.net/usage/options#sDom). — azeós, Feb 03 '14 at 20:21
Yep, I noticed, it works now, thanks for pointing though, does the actions need to be replaced with css class in order to get back the styles? — user2675939, Feb 03 '14 at 20:22
I don't know what were your previous styles. What was your code? I used custom classes, so I don't know which are the default ones. Try to use the default code and explore the generated classes with [Firebug](https://getfirebug.com/) or something like that, and them apply them. — azeós, Feb 03 '14 at 20:30

score 4 · Answer 1 · edited May 23 '17 at 11:52

As pointed out by @azeos, you are missing l in sDom. Corrected code is shown below:

$(function(){
   var oTable = $('#example').dataTable({
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
       "iDisplayLength": 100,
       "sDom": '<"top"<"actions">lfpi<"clear">><"clear">rt<"bottom">'
   });
});

See sDom (DataTables 1.9) or dom (DataTables 1.10+) for more information.

jQuery Datatables show page numbers at top

1 Answers1