Custom Edit Button (external)

Matthew2051

Hello again,

I have created an editable table but wish to not use the default buttons provided by table tools. Instead I would like to get a link external to the table element to fire the same action as the default table tool edit button would.

[code]
$('#edit-record').click(function () {
// Code to edit record...
});
[/code]

The user would select the record they wish to edit as normal, then in another area of the webpage they would click the custom edit button which would bring up the default lightbox, etc... Tried looking at the example and the forums but I can't seem to get a button outside the element to work.

Any help would be much appreciated as always. Thank you.

allan

The `edit()` API method of Editor is what I think you are looking for here: https://editor.datatables.net/api/#edit .

There is an example of `edit()` being used here: https://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

Allan

Matthew2051

Hey Allan,

thank you for the quick reply. From looking at the documentation, the following is half way there... Clicking the custom button brings up the lightbox and the user can edit but what I can't fathom is how to correctly identify which row the user has selected (if any). At the moment the code below will edit the first row, do you have any ideas on how I could pickup on which row is selected? Thank you again.

[code]
// Edit record
$('#edit-record').click(function () {
editor.edit($('#settings-table tbody tr:eq(0)')[0], 'Edit record', {
"label": "Update",
"fn": function () { this.submit(); }
});
});
[/code]

allan

> do you have any ideas on how I could pickup on which row is selected?

What method are you using to allow the user to select a row? If TableTools, then you could just use the `DTTT_selected` class that it adds to the `tr` elements. `$(#settings-table tbody tr.DTTT_selected`)[0]` for example.

Or you can use the TableTools fnGetSelected API method: http://datatables.net/extras/tabletools/api#fnGetSelected

Allan

Matthew2051

Hello Again,

Thanks again for your help, really appreciate it!

This is what I came up with in the end, please let me know if you think there may be a more efficient solution;

[code]
// Edit record
$('#edit-record').click(function () {
var selRow = TableTools.fnGetInstance('settings-table').fnGetSelected();
if (selRow[0]) {
selRow = selRow[0]['_DT_RowIndex'];
editor.edit($('#settings-table tbody tr:eq(' + selRow + ')')[0], 'Edit record', {
"label": "Update",
"fn": function () { this.submit(); }
});
}
});
[/code]

Matthew2051

Damn... so close but yet so far. When my data is collected in the table I sort it using aaSorting. Is there anyway to get the correct tr id after a sort?

allan

> Is there anyway to get the correct tr id after a sort?

As in you aren't able to get the node for the id you want because it has been sorted off the current page? Use the `$` method method to of that ( http://datatables.net/docs/DataTables/1.9.4/#$ ). It basically provides the ability to do a jQuery selector on the rows regardless of paging etc. However:

I would suggest not using `_DT_RowIndex` (anything with an leading underscore is considered "private" and is liable to change in future). I don't think you need to use that or the jQuery selector at all - `selRow` is already the row you want to edit is it not?

[code]
// Edit record
$('#edit-record').click(function () {
var selRow = TableTools.fnGetInstance('settings-table').fnGetSelected();
if (selRow.length) {
editor.edit(selRow, 'Edit record', {
"label": "Update",
"fn": function () { this.submit(); }
});
}
});
[/code]

Allan

Matthew2051

Again Allan, thank you for your reply! This ticks all the boxes. Thank you.

Matthew2051

Morning Allan,

Should have tried this straight away but when editing a record and clicking update the lightbox displays an error "An error has occurred - Please contact the system administrator"

Opened up Firebug in Firefox and looked at the the responses from each method of updating a record. Using the default edit button I get the following response:

[code]
{"id":"row_12","fieldErrors":[],"sError":"","aaData":[],"row":{"DT_RowId":"row_12","location_id":"12","location_aero":"0","location_units":"bpm","location_string":"R4","location_speed":"250","location_speed_min":"200","location_speed_max":"300","location_oee":"70","location_cell":"5"}}
[/code]

Using the custom edit button as you kindly helped out with above, I get the following response when the user clicks update:

[code]
Notice: Array to string conversion in ...\lib\Database\Driver\Mysql\Query.php on line 85
Notice: Array to string conversion in ...\lib\Editor\Editor.php on line 580

{"id":"row_Array","fieldErrors":[],"sError":"","aaData":[],"row":{"DT_RowId":"row_12","location_id":"12","location_aero":"0","location_units":"bpm","location_string":"R4","location_speed":"250","location_speed_min":"200","location_speed_max":"300","location_oee":"70","location_cell":"5"}}
[/code]

Looks like the id is at fault, able to point me in the right direction again? Thank you for any help.

Matthew2051

Update: solved (again)... first value in selRow array;

[code]
// Edit record
$('#edit-record').click(function () {
var selRow = TableTools.fnGetInstance('settings-table').fnGetSelected();
if (selRow.length) {
editor.edit(selRow[0], 'Edit record', {
"label": "Update",
"fn": function () { this.submit(); }
});
}
});
[/code]

allan

Nice one :-). This is where that new API I was talking about might prove useful ;-)

Allan