datatable: show row per page and export button at the same time

Well this posting is an extra info of my previous posting. After I struggled with an error, now I want to show the page per button and the export button at the same time. 

I found two ways from stackoverflow. 

so here is the first solution:

$(document).ready(function() {
    document.title = 'page Title';
    $('#example').DataTable( {
        dom: 'Bfrtip',
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        buttons: [
            'pageLength',
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
    } );
} );

You can delete or comment the second line, it was included in my code since I coded it in a team and the used template seems doesn't have title tag in its header. So, I set it in here. The title of the page will be used as the filename when its downloaded. 

The second solution is:

$(document).ready(function() {
    document.title = 'page Title';
    $('#example').DataTable( {
        dom: 'lBfrtip',
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
    } );
} );

Take a look at the 'dom:' attribute. The second solution uses 'lBftrip' whereas the first solution uses 'Bfstrip'. now then take a look closer to the first solution, if we use 'Bfstrip', then we have to add 'pagelength' as a button as well. 

Just try them and see the different. NOTE!!! don't forget to call all the needed css and js scripts. You can find them all here.