Buttons - copy, excel etc not shown

crush123

I must be missing something here, I have a datatable with editor, and i have new, edit and delete buttons visible and working on my page.

I want to be able to add copy and excel export, so I have simply added them to the buttons [ ] list, but they do not appear.

buttons: [
        {
            extend: "create",
            editor: editor,
            formButtons: [
                'Create',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: "edit",
            editor: editor,
            formButtons: [
                'Edit',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: "remove",
            editor: editor,
            formButtons: [
                'Delete',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        'csv', 'excel', 'pdf'
    ]

http://test3.forthwebsolutions.com/vanilla_eventtypes.php

bcrouzy

Try to add this before buttons:
dom: 'Bfrtip'

yourDt.DataTables(

dom: 'Bfrtip'
buttons: ......)

crush123

thanks for the reply

i only posted the buttons code, but here is the full table js, as you can see, B is already added to the dom

table = $('#example').DataTable( {
    order: [ 0, "asc"],
    dom: "Bfrtp",
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    ajax: "/ajax/eventtype.php",
    columns: [
        { data: "refeventtype.ListOrder", className: 'reorder', width: '15%' },
        { data: "refeventtype.EventTypeDescription" }
        ],
    rowReorder: {
        dataSrc: 'refeventtype.ListOrder',
        editor:  editor
    },
    select: true,
    buttons: [
        {
            extend: "create",
            editor: editor,
            formButtons: [
                'Create',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: "edit",
            editor: editor,
            formButtons: [
                'Edit',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: "remove",
            editor: editor,
            formButtons: [
                'Delete',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        'csv', 'excel', 'pdf'
    ]
} );

allan

It is missing the dependencies for those button types. You need to include buttons.html5.js at a very minimum. For Excel you need JSZip as a dependency and for PDF you need pdfmake.

The download builder will help resolve these dependencies.

Allan

crush123

Thanks Allan,

I recently updated the buttons extension, - downloaded as a release package, and the extras are not included in the file.

I didn't realise until rereading the documentation that the buttons wouldn't be rendered without these xtra files, I expected a non functioning button if there was a problem