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

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

blabablabablabablaba Posts: 47Questions: 19Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • blabablabablabablaba Posts: 47Questions: 19Answers: 0

    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>
    
  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

  • blabablabablabablaba Posts: 47Questions: 19Answers: 0

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

This discussion has been closed.