CODEWITHSUNDEEP
jqueryjquery-pagination
Mary
Mary

Reputation: 1595

JQuery Datatable moving the pagination to the top

I am trying to move the pagination property to the upper right hand side of the table. I understand that I have to use the dom property. 

 $(document).ready( function () {   
    $('#myTbl').dataTable({   
        "bInfo":true,
        "bJQueryUI": true,
        "bProcessing": true,
         "bPaginate" : true,
         "aLengthMenu": [[50,100,150,200,250,300,-1], [50,100,150,200,250,300,"All"]],
        "iDisplayLength": 50,
        "sPaginationType": "full_numbers",
        "dom": '<"top"flp>rt<"bottom"i><"clear">'           

    });
});

I thought by using flp on top would make those options appear on top, however the pagination appears on the bottom of the table. Would appreciae any help in understanding this. Thanks.

Upvotes: 3

Views: 17252

Answers (3)

Jess
Jess

Reputation: 25137

The documentation for the dom option has a great example.

Length and filter above < the table; information and pagination below table:

$('#example').dataTable( {
  "dom": '<lf<t>ip>'
} );

The tricks are knowing about this crazy dom option and knowing what the heck lftrip means.

Upvotes: 1

aditya Patial
aditya Patial

Reputation: 11

put in css ``.dataTables_wrapper .pagination { float: left !important; }`

also add `

   $('#tableid').dataTable({       
        "pagingType": "full_numbers",
        "ordering": false,
        "bLengthChange": false,
        "searching": false,
        "info": false,
        "dom": '<bottam>p',  (this line only)
    });`

Upvotes: 1

David Barker
David Barker

Reputation: 14620

As you're using the old API (<= 1.9.x) you need to make sure that you use the hungarian notation for dom, it's a string so it is sDom.

$('#myTbl').dataTable({   
    "bInfo":true,
    "bJQueryUI": true,
    "bProcessing": true,
    "bPaginate" : true,
    "aLengthMenu": [[50,100,150,200,250,300,-1], [50,100,150,200,250,300,"All"]],
    "iDisplayLength": 50,
    "sPaginationType": "full_numbers",
    "sDom": '<"top"flp>rt<"bottom"i><"clear">'
});

Upvotes: 3

Related Questions