Displaying multiple options above the table

Displaying multiple options above the table

kwhall86kwhall86 Posts: 3Questions: 1Answers: 0

I am very new to web development and need some help.

I want to provide the ability to export my table and print, while also display the option to change the number of rows per page. The problem is that my buttons are being displayed on top of my drop down menu.

<script>
$(document).ready(function () {
    $('#monthly').DataTable({

        "iDisplayLength": 25,
        "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],

        dom: 'Bfrtip',
        buttons: ['print', 'excelHtml5', 'csvHtml5'],

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function (row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }

    });
})
</script>

Thanks in advance for any help you can provide!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,563Questions: 26Answers: 4,995

    I think you need to add the length input option (l) to your config. For example:
    dom: 'Blfrtip'.

    https://datatables.net/reference/option/dom

    Kevin

  • kwhall86kwhall86 Posts: 3Questions: 1Answers: 0

    Thanks. That seems to do the trick, but now the buttons and drop down menu have moved to what looks like one row above my search feature. See attached PNG file of a screen shot.

    I am importing the following (I got these from this website's demos):

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css ">
    
    
    <script src="//code.jquery.com/jquery-1.12.4.js">    </script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">    </script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js">    </script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js">    </script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js ">    </script>
    <script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js">    </script>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">    </script>
    <script src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js">    </script>
    
  • kthorngrenkthorngren Posts: 21,563Questions: 26Answers: 4,995
    Answer ✓

    Since you are using Bootstrap you might need to change your dom options to this:

     dom: "<'row'<'col-sm-6'Bl><'col-sm-6'f>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    

    https://datatables.net/reference/option/dom#Styling

    Optionally you can use Bootstrap style buttons by changing your CSS and adding the DT bootstrap JS as described here:
    https://datatables.net/manual/styling/bootstrap
    https://datatables.net/extensions/buttons/examples/styling/bootstrap.html

    Kevin

  • kwhall86kwhall86 Posts: 3Questions: 1Answers: 0

    Thanks for helping a noob out!

This discussion has been closed.