Custom Edit Button (external)
Custom Edit Button (external)
Matthew2051
Posts: 13Questions: 1Answers: 0
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.
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.
This discussion has been closed.
Replies
There is an example of `edit()` being used here: https://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html
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]
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
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]
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
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.
[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