Editor: Button outside datatable && Create Row Automatically Fires on page load

blabablaba

Hi Allan,

With respect to Editor;

Is it possible to have a 'create record' button elsewhere in the document, outside the datatable, eg page menu?
Is it possible to open a 'create record' modal upon page load?
Is it possible to open a 'create record' modal without displaying the underlying datatable?

I want to use the Datatables Editor create-record modal for data entry / error reporting immediately upon page load OR upon button press elsewhere in the document (eg click event on menu item)

From a UX perspective, a successful 'create' would not result in a traditional one-row datatable, rather it would probably be better to present in a bespoke template or a page-refresh.

I have looked for examples. The closest I got was:

https://datatables.net/extensions/buttons/examples/initialisation/multiple.html
https://datatables.net/reference/option/buttons.dom
https://www.datatables.net/forums/discussion/comment/106096/#Comment_105236

I have tried incorporating html:

<div class="dt-buttons">
    <a class="dt-button" tabindex="0" aria-controls="admin-dt">
        <span>Collection button 1</span>
    </a>
    <a class="dt-button" tabindex="0" aria-controls="admin-dt">
        <span>Collection button 2</span>
    </a>
</div>

and corresponding js:

...
        buttons: [
            {
                extend: "create", 
                text: "New User",
                editor: editor, 
                formTitle: 'New Account',
                formButtons: [
                    {
                        text: 'Create',
                        className: '',
                        action: function() {
                            this.submit();
                        }

                    }
                ]
            },
            { extend: "remove", editor: editor },
            { dom:
                {
                    container: {
                        tag: 'div'
                    },
                    buttonContainer: {
                        tag: 'a'
                    },
                    button: {
                        tag: 'span'
                    },
                    text: 'Button 2',
                    action: function ( e, dt, node, conf ) {
                        alert( 'Button 2 clicked on' );
                    }
                }
            }
        ]
...

However, while this renders 2 html buttons, they are unresponsive when clicked.

I'm at a bit of a loss with how to approach it. Is any of this possible? :-)

Steve

blabablaba

Hi Allan,

Following the documentation, I have made good progress placing a button elsewhere in the document. This is how I did it:

    new $.fn.dataTable.Buttons( table, {
        buttons: [
            {
                extend: "create", 
                text: "Join",
                editor: editor, 
                formTitle: 'New Account',
                formButtons: [
                    {
                        text: 'Create',
                        className: '',
                        action: function() {
                            this.submit();
                        }
                    }
                ]
            }
        ]
    } );

    table.buttons( 1, null ).container().appendTo(
        "#controlPanel"
    );

HTML:

<div id="controlPanel"></div>

allan

Hi,

You don't even need to use Buttons for this - you can just use the Editor API directly.

For example, to open a "create" form when the page loads:

$(document).ready( function () {
  var editor = new $.fn.dataTable.Editor( {
    ...
  } );

  // Immediate invokation
  editor.create();
} );

For showing a create page on load, you might be interested in using a display controller like this one. Particularly if you are not using a DataTable.

Allan

blabablaba

Thanks Allan - bowled over with the answer. Will take a look at the display controller as well