DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Button Extensions not showing up

Button Extensions not showing up

dhookwaydhookway Posts: 4Questions: 1Answers: 0
in Free community support

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.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

    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

  • dhookwaydhookway Posts: 4Questions: 1Answers: 0

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

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    Answer ✓

    From the dom documentation:

    l - length changing input control

  • dhookwaydhookway Posts: 4Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,531Questions: 1Answers: 10,474 Site admin
    Answer ✓

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

    Allan

  • dhookwaydhookway Posts: 4Questions: 1Answers: 0

    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

  • allanallan Posts: 63,531Questions: 1Answers: 10,474 Site admin

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

    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.