Adding buttons in Editor's lightboxes
Adding buttons in Editor's lightboxes
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
Cheers,
Chris
This discussion has been closed.
Replies
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
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
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
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