How to add button in Standalone collection editor?

MarekAdam

Link to test case: https://editor.datatables.net/examples/standalone/collection.html
Description of problem: I need to add 2 buttons in this place
https://www.dropbox.com/scl/fi/izic4yzvjw2hiu17iop5z/Zrzut-ekranu-2023-12-09-03.46.53.jpg?rlkey=oyfm7yuf5vfzfqlf0ri15eqry&dl=0
One for reseting data in the form (erase all) and second for ajax query that will send an email (so i have to post form_id).

I have no idea how to do it in the table from the linked test case.
I was thinking to add template: '#customForm' but dont know where
Any ideas?

kthorngren

See if this thread and this example help add buttons to the Editor form.

Kevin

MarekAdam

Thanks for fast answer Unfortunately, I tested the example you linked earlier and it does not work in this case (Standalone collection editor).
My code is:

// Load the initial data and display in panels
        $.ajax({
            url: '/php/z.php',
            dataType: 'json',
          
            buttons: [
                { extend: 'create', editor: editor_e },
                {
                    extend: 'selected',
                    text: 'Edit',
                    action: function () {
                        let indexes = table.rows({ selected: true }).indexes();

                        editor_e.edit(indexes, {
                            title: 'Edit',
                            buttons: indexes.length === 1 ? backNext : 'Save'
                        });
                    }
                },
                { extend: 'remove', editor: editor_e }
            ],
            success: function (json) {
                console.log(json);
                console.log('json');


                for (var i = 0, ien = json.data.length; i < ien; i++) {
                    createPanel(json.data[i],json.options["z.p"]);
                }
            }
        });

        $('#z').on('click', '.edit', function () {
            console.log($(this).data('id'));
            editor_e
                .title('Edit record')
                .buttons('Save')
                .edit($(this).data('id'));
        });

Still i have only Save button and i cant add another. CustomForm dont want to work too.

PS. The code has minimal changes compared to the example, but they are not significant (I have 20 such tables on one page - as a calendar)

allan

Hi,

It looks like you are passing the buttons object to the $.ajax configuration object. That is going to be ignored there since jQuery doesn't do anything with a buttons property. Moreover, the code there is for a DataTables Buttons collection - not the buttons found in the Editor form.

.buttons('Save')

is what defines the button in your editing view. Currently just a button that says "Save" (default action is to submit).

You need to define your custom button in there:

.buttons([
  'Save',
  {
    label: 'BTN2',
    action: function () {
      // whatever this button is meant to do
    }
  }
]);

Allan