datatablesjquery-datatables-editor

Add export button to Datables Editor


When using Datatables Editor plugin, I am trying to add the Export (excel, csv, etc) button besides the "New", "Edit" and "Delete" buttons. My original code:

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]);
    table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
} );

I then have tried to add the "export" buttons like this:

[
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor },
            {
                extend: "collection",
                text: 'Export',
                buttons: [
                    "copy",
                    "excel",
                    "csv",
                    "pdf",
                    "print"
                ]
            }
        ]

But it does not work...


Solution

  • Your button definitions should look like this:

                    {
                        extend: 'excel',
                        
                    },
                    {
                        extend: 'pdf',
                       
                    },
                    {
                        extend: 'csv',
                       
                    },
                   {
                        extend: 'print',
                       
                    },
                     {
                         extend: 'copy',
                       
                    }
    

    They are separate buttons, not a single button. You can add them in any order you want, so if you want them after the "Add, Edit, Delete" buttons, just add these definitions after those buttons.