Creating custom add/edit/remove function

Creating custom add/edit/remove function

StpdudeStpdude Posts: 30Questions: 0Answers: 0
edited December 2012 in General
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!

Replies

  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    Heres what i have so far:

    [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'
  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin
    So the basic idea for what you've got looks right (although I'd say ditch the `ajax` button at the end of your second post - that would bypass Editor).

    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
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    Sorry for the long delay, holiday weekend and all. The server should be correctly set, i dont administer it, im just the newly hired grad working on the web interface side :)
  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin
    Happy holidays :-)

    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
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    Thanks!

    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......
  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin
    > It visually deletes the element, but refreshing the page and it shows up again

    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
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    hmm, ok. I'm not great with server stuff and yet they have me doing this project :P If im understanding right i need to use a server_processing.php file changed to work with MS SQL?
  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin
    > If im understanding right i need to use a server_processing.php file changed to work with MS SQL?

    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
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    Hmm k. I passed that over to the person whos actually managing the server so they are looking at whats missing. In the mean time im inspecting and comparing our version with the examples on the editor page, and for some reason when using the delete function, ours does not pass a row number to the server.

    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?
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    Well the guy who can answer my questions about how they setup the server and the database is out sick till next week so that makes this a bit harder to do :) Still stuck on the problem above ^ been tweaking the code around and looking around here and see that your examples have the DT_RowId added to them, but cant quite figure out how to get mine to add it.
  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin
    The row ID comes from DT_RowId parameter in the data source object. If it isn't present in the data source object (added by the backend script) then it isn't going to work.

    Editor 1.2.3 will introduce a new option called `idSrc` which lets you use a different option from DT_RowId.

    Allan
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    edited January 2013
    Thanks Allan! Any clue when the new version of Editor will be out? And with that idSrc option, in my table theres an 'ID' row and each entry has an ID we have given it, I could using that new option have it point to that and just return the value of my 'ID' column?
  • allanallan Posts: 61,642Questions: 1Answers: 10,093 Site admin
    I think I'll need to release it just for this one new option - it is proving to be quite popular :-).

    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
  • StpdudeStpdude Posts: 30Questions: 0Answers: 0
    Gotcha :) Sadly i do not have a multi-dev licence :( Our company *may* but i highly doubt it much less know who to talk to about seeing if we do.....
This discussion has been closed.