Button Extensions not showing up

dhookway

I created a JS fiddle to show this: https://jsfiddle.net/q0ruv6sx/2/

I am instantiating this by the following code:

                    ThisDataTable = $('#MyTable').DataTable({
                        data: TableData,
                        buttons: [
                            {
                                extend: 'pdfHtml5',
                                download: 'open'
                            },
                            'print'
                        ],
                        columns: [
                            { title: "Number" },
                            { title: "Name" },
                            { title: "Start Date" },
                            { title: "Customer" },
                            { title: "Location" },
                            { title: "Sales Person" }
                        ]
                    });

I have tried without the pdfHtml5 button as well.

I am including all of the recommended JS and CSS from the download tool provided.

kthorngren

You need to add the dom option to include the buttons (B). This is an example:
https://datatables.net/extensions/buttons/examples/initialisation/simple.html

Kevin

dhookway

As soon as I did that, the "number of records to display" dropdown disappeared. Is there an option I have to set for that?

tangerine

From the dom documentation:

l - length changing input control

dhookway

Ok, I think one last question.

I have

Blfrtip

as my DOM options. The buttons and length dropdown aren't showing up on the same line.

allan

They should with that. Can you give a link to a test case showing the issue please?

Allan

dhookway

ended up going with

    var ThisDataTable = $('#MyTable').DataTable({
        // 'Blfrtip'
        dom: "<'row'<'col-xs-1'B><'col-xs-7'l><'col-xs-4'f>>" +
        "<'row'<'col-xs-12'tr>>" +
        "<'row'<'col-xs-5'i><'col-xs-7'p>>",
        buttons: [
            {
                extend: 'print',
                customize: function (win) {
                    $(win.document.body)
                        .css('font-size', '8pt');

                    $(win.document.body).find('table')
                        .addClass('compact')
                        .css('font-size', 'inherit');
                },
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5]
                }
            }
        ],
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        columns: [
            { title: "Job Number" },
            { title: "Job Name" },
            { title: "Start Date", iDataSort: 7 },
            { title: "Customer Name" },
            { title: "Customer Location" },
            { title: "Sales Person" },
            { title: "Command" },
            { title: "Start Date Sort", visible: false }
        ]
    });

as my full initialization code.

I needed to do some work with bootstrap to make it appear how I wanted

allan

Yup - if you are using Bootstrap the dom option is a total pig. I'll fix that in 2018 .

Allan