Adding buttons in Editor's lightboxes

Deuce14

I'll start by saying I love DataTables and Editor. I'm just a bit stuck at the moment on how to add a button to the Editor lightbox which pops when you click on either Add or Edit (not worried about Remove). I can change the button no worries (they're called by adding the .on('click', 'a.editor_edit', function(e)... method), but I can't for the life of me figure out how to add a second button alongside. Appreciate any pointers in the right direction - and thanks again for a great product.

Cheers,
Chris

allan

Do you mean a button next to add, edit and remove in the toolbar, or in the lightbox buttons?

For the former, use the aButtons option in the TableTools definition.

For the latter, use the `buttons()` API method.

If you could show me the page, or the code,perhaps I can elaborate a bit further and more usefully!

Allan

Deuce14

Allan,

Sorry - I meant the buttons within the Lightbox. I got the Add, Edit, Remove sorted out no problems.

Here's what I'm using for the lightbox editor:

[code]
$('#editTable').dataTable( {

/*** All the dataTables coding in here, works fine... ***/

} ).on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );

// Create a new record
$('a.editor_create').on('click', function (e) {
e.preventDefault();

editor.create(
'Create new record',
{ "label": "Add", "fn": function () { editor.submit() } }
);
} );
[/code]

I tried adding in the following, but it doesn't show:

[code]
editor.buttons( [
{
"label": "Cancel",
"fn": function () { this.close(); }
}, {
"label": "Update",
"fn": function () { this.submit(); }
}
] );
[/code]

Thanks for giving it a look!

Cheers,
Chris

allan

Hi Chris,

Try this:

[code]
$('#editTable').dataTable( {

/*** All the dataTables coding in here, works fine... ***/

} ).on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
[
{ "label": "Close", "fn": function () { editor.close() } },
{ "label": "Update", "fn": function () { editor.submit() } }
]
);
} );

// Create a new record
$('a.editor_create').on('click', function (e) {
e.preventDefault();

editor.create(
'Create new record',
[
{ "label": "Close", "fn": function () { editor.close() } },
{ "label": "Add", "fn": function () { editor.submit() } }
]
);
} );
[/code]

The third parameter of the `edit()` method (2nd of the `create()` ) is passed straight into `buttons()` - its just the same thing, called internally. So if you called buttons first, and then your functions as you had above, the buttons defined in your `add` and `edit` calls would overwrite those defined before!

Regards,
Allan

Deuce14

Allan,

Cheers - works perfectly. I had actually tried a version of that solution before, however I forgot to add in the [ ] brackets to denote the list, hence it didn't work (just used the last button value). The brackets [ ] were the piece I was missing. Thanks!

Cheers,
Chris