Buttons as Dropdpwns

karlie

Hi, Can anyone point me in the right direction for displaying buttons as dropdowns? I have looked at this link but can't seem to get it to work https://datatables.net/extensions/buttons/examples/initialisation/collections.html

My code looks like this:

new $.fn.dataTable.Buttons( table, [
    
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor },
        { extend: "selected",text: 'Duplicate',
                action: function ( e, dt, node, config ) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit( table.rows( {selected: true} ).indexes(), {
                            title: 'Duplicate record',
                            buttons: 'Create from existing'
                        } )
                        .mode( 'create' );
                }
            },
        { extend: "copy", exportOptions: {columns: ':visible'}},
        { extend: "excelHtml5", exportOptions: {columns: ':visible'}},
        { extend: "csvHtml5", exportOptions: {columns: ':visible'}},
        { extend: "print", exportOptions: {columns: ':visible'}},
        'colvis', 'pageLength'  
    ] );
    
        table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

Can't upload an image to this post for some reason (says image upload failed), but you can see it here:

allan

Try:

new $.fn.dataTable.Buttons(table, [
  {
    extend: "collection",
    text: "Actions",
    buttons: [
      {
        extend: "create",
        editor: editor
      },
      {
        extend: "edit",
        editor: editor
      },
      {
        extend: "remove",
        editor: editor
      },
      {
        extend: "selected",
        text: "Duplicate",
        action: function(e, dt, node, config) {
          // Start in edit mode, and then change to create
          editor
            .edit(
              table
                .rows({
                  selected: true
                })
                .indexes(),
              {
                title: "Duplicate record",
                buttons: "Create from existing"
              }
            )
            .mode("create");
        }
      }
    ]
  },
  {
    extend: "collection",
    text: "Export",
    buttons: [
      {
        extend: "copy",
        exportOptions: {
          columns: ":visible"
        }
      },
      {
        extend: "excelHtml5",
        exportOptions: {
          columns: ":visible"
        }
      },
      {
        extend: "csvHtml5",
        exportOptions: {
          columns: ":visible"
        }
      },
      {
        extend: "print",
        exportOptions: {
          columns: ":visible"
        }
      }
    ]
  },
  "colvis",
  "pageLength"
]);

table
  .buttons()
  .container()
  .appendTo($(".col-md-6:eq(0)", table.table().container()));

Allan

karlie

Thanks Allan, that unfortunately produces an error

allan

I missed a closing } in the second collection. Edited the above post now.

karlie

Not sure if I'm making a mistake, but that still throws an error Allan

allan

Sorry - one more try. Another trivial syntax error. I've run it through a parser this time!

Allan

karlie

Thanks very much Allan, much appreciated.