JQuery Datatable moving the pagination to the top

Question

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.

Answer 1

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

Answer 2

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