3

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Mary
  • 1,505
  • 5
  • 27
  • 44

3 Answers3

3

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">'
});
David Barker
  • 14,484
  • 3
  • 48
  • 77
1

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)
    });`
aditya Patial
  • 11
  • 1
1

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.

Jess
  • 23,901
  • 21
  • 124
  • 145