Creating custom add/edit/remove function
Creating custom add/edit/remove function
Hey all,
So im trying to add add/edit/remove functionality to my table. but am rather confused on how to do it so far. I need to have them make a call to another method which then sends the SQL command to our MS SQL server to change the database. So far i see that using the [code] "aButtons": [ "Add", "Edit", "Delete" ] [/code] creates the buttons, but im not clear on how to define their functions. id like them to call to one of my classes which has the SQL command in it, and pass the data in which the method then sends and processes. Is there a way to do this? or do i have to make a php file and do the individual SQL commands nested in that somehow?
Thanks!
So im trying to add add/edit/remove functionality to my table. but am rather confused on how to do it so far. I need to have them make a call to another method which then sends the SQL command to our MS SQL server to change the database. So far i see that using the [code] "aButtons": [ "Add", "Edit", "Delete" ] [/code] creates the buttons, but im not clear on how to define their functions. id like them to call to one of my classes which has the SQL command in it, and pass the data in which the method then sends and processes. Is there a way to do this? or do i have to make a php file and do the individual SQL commands nested in that somehow?
Thanks!
This discussion has been closed.
Replies
[code]
var editor;
$(function() {
$('#demo').html( '' );
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "dataTable/edit",
"domTable": "#example",
"fields": [ {"label": "ID:","name": "id"},
{"label": "Version:", "name": "version" },
{"label": "Name:", "name": "name" },
{"label": "Application Name:", "name": "applicationName" },
{"label": "Application Version:", "name": "applicationVersion" },
{"label": "Availability:", "name": "availability" },
{"label": "Baseline Load:", "name": "baselineLoad" },
{"label": "Color", "name": "color"},
{"label": "Implementation ID", "name": "implementationId"},
{"label": "Quantity", "name": "quantity"},
{"label": "Label", "name": "label"},
{"label": "Location", "name": "location"},
{"label": "Application Owner", "name": "applicationOwner"},
{"label": "Architecture Owner", "name": "architectureOwner"},
{"label": "Data Owner", "name": "dataOwner"},
{"label": "Is Ola Agreed?", "name": "isOlaAgreed"},
{"label": "Is Recognized", "name": "isRecognized"},
{"label": "Is Strategic", "name": "isStrategic"},
{"label": "Resolved Time UTC", "name": "resolvedTimeUtc"}
]
} );
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"bJQueryUI": true,
"sDom": 'T<"H"fl>t<"F"ip>',
"sAjaxSource": 'dataTable/getData',
"aoColumns": [
{ "mData": "id", "sTitle": "ID" },
{ "mData": "version", "sTitle":"Version" },
{ "mData": "name", "sTitle": "Name" },
{ "mData": "applicationName", "sTitle": "Application Name" },
{ "mData": "applicationVersion", "sTitle": "Application Version" },
{ "mData": "availability", "sTitle": "Avaliblity" },
{ "mData": "baselineLoad", "sTitle": "Baseline Load"},
{ "mData": "color", "sTitle": "Color"},
{ "mData": "implementationId", "sTitle": "Implementation ID"},
{ "mData": "quantity", "sTitle": "Quantity" },
{ "mData": "label", "sTitle": "Label" },
{ "mData": "location", "sTitle": "Location" },
{ "mData": "applicationOwner", "sTitle": "Application Owner" },
{ "mData": "architectureOwner", "sTitle": "Architecture Owner" },
{ "mData": "dataOwner", "sTitle": "Data Owner" },
{ "mData": "olaAgreed", "sTitle": "Is OLA Agreed" },
{ "mData": "recognized", "sTitle": "Is Recognized?" },
{ "mData": "strategic", "sTitle": "Is Strategic?" },
{ "mData": "resolvedTimeUTC", "sTitle": "Resolved Time UTC" },
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Delete'
}
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "editor_create",
"editor": editor
},
{
"sExtends": "editor_edit",
"editor": editor },
{
"sExtends": "editor_remove",
"editor": editor
}
]
}
} );
});
[/code]
as you can see ive added
[code]
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Delete'
}
[/code]
which puts a delete button on the end of each row pointing to a url which is grabbed by another section and directs it on the generating and processing of my SQL. This part works. But its not ideal and id like to be able to use the regular add/edit/remove buttons, Ive added them using the editor but i dont think thats the way i want to go.
Trying [code]
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "ajax",
"sButtonText":"Delete",
"sAjaxUrl": "/dataTable/deleteMDR"
},
[/code]
and when i click on a row then click the delete button i get a pop-up error saying 'error detecting when sending data table to server'
Have you implemented the client-server communication protocol that Editor uses, as described here: http://editor.datatables.net/server/ ? That is needed to allow Editor to work as expected.
Allan
You need to confirm if the server is correctly communicating with the client for Editor or not, as obviously with the information I have available I can't say.
Allan
I believe it is, im running more tests on it trying to figure it out, when i hit the delete button for example, and hit confirm on the pop-up. It visually deletes the element, but refreshing the page and it shows up again. tracking the response in dev tools says that the response is: []
So im guessing theres just a miss connect somewhere......
In which case the server isn't deleting the row. That's not something the client-side Javascript can do - its up tot he server to remove it from the database, which it obviously isn't.
Allan
Possibly - my server_processing.php script doesn't support Editor - it is read only - it will not add, edit and remove files. You need to support the Editor client/server protocol that I've linked to before if you want to use Editor in its native format.
Allan
IE when watching it in firebug on your example, i select a row and click the delete key and it passes in [code]action=remove&table=&id=&data%5B%5D=row_12[/code]
Telling it to remove row_12
When i do it on ours:
[code] action=remove&table=&id=&data%5B%5D=[/code]
So it looks like its also not tagging the row correctly....is this an easy fix or am i totally missing another big chunk?
Editor 1.2.3 will introduce a new option called `idSrc` which lets you use a different option from DT_RowId.
Allan
You don't have a multi-developer license under someone else's account do you? If so I can send you over a pre-release version.
> I could using that new option have it point to that and just return the value of my 'ID' column?
That's correct - that's the exact intention of the `idSrc` option.
Allan