Conflict between Bfrtip (buttons) and number dropdown

Question

Here is my code for a datatables implementation:

<script type="text/javascript" src="../js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="../js/jquery-ui.js" ></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" type="text/css" media="all">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>

var table = $('#TransactionsTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy',
        'csv',
        'excel'
    ],
    "order": [[6, "desc"]],
    "columnDefs": [
       {
          "visible": false,
            "targets": [8]
       }
    ]
} );

I have a problem with the line "dom: 'Bfrtip',". If I include it, the buttons show, but the dropdown that allows you to select number of entries (e.g. show 10, 25, 50, 100 entries) disappears. If I remove that line the dropdown comes back but the buttons don't show. Why do I need to choose? How can I have both?

Answer 1

Use dom: 'Blfrtip', to make the "per page" selector appear.

Notice I've included l there, it stands for length changing input control.

See the docs for more info.

Answer 2

use dom: 'Blfrtip'. Note that there is an 'L' after B