Tabulator: Code Example for Updating Edited Cell on the Server?

Created on 4 Sep 2017 · 13Comments · Source: olifolkerd/tabulator

Hi Oli,

I've browsed the documentation (which is very helpful) and yet I'm unclear on what code needs to be added to send and edited cell back to the server to update the data source (MySQL database) where the data came from in the first place?

BTW, amazing work with Tabulator! Thank you very much.

Many thanks,
Constantine

Question - Ask On Stack Overflow

Source

c-zakkaroff

Most helpful comment

Thanks for the reply Oli, much appreciated.

I solved it following the example from c-zakkaroff by using single speech mark ['] instead of the ["]. Sorry, I'm new to this.

Here's the full js. Hope it help someone using MVC and new to it like me.

All 13 comments

Hey Constantine,

Thanks for getting in touch. The reason that there is no specific example for this is because it depends entirely on how you want to send the data back to the server.

Some people will send back the value for a given cell when a cell is edited, others will send back a row when ever any cell on that row is edited, others will only send data back to the server when the use clicks a save button, and then some will send the whole table back, and others will only send the updated rows back.

The will all follow the same basic design though, an action on the table or a button will trigger an ajax request to the server that will pass back the data.

You can use the cellEdited callback to catch when a cell is edited and then trigger all your actions from that.

if you have a specific case in mind i would be happy to give you some more specific pointers.

Cheers

Oli

olifolkerd on 4 Sep 2017

Hi Oli,

Thank you very much for your response.

Yes, out of the possible options you listed, in my case I favour the option of sending the edited cell value. Sending the whole row would do, but as you say, the design would be similar for these options.

I guess my question is about having a loot an an example how the ajax request is put together, in terms of the primary key for the row and updated values. My server talks PHP with MySQL, although it is not as important as putting the right data in the request, which I guess would have to be a POST request.

I appreciate your help and tips.

Best regards,
Constantine

c-zakkaroff on 6 Sep 2017

Hey,

You would need to pass any primary key into the table data. tabulator allows you to define one data field as the rows index, Using the index config option, which is by default set to the id filed.

you can then call the getIndex() function on the row component to get the index of that row,

I hope that helps

Cheers

Oli

olifolkerd on 6 Sep 2017

Thank you for your response once again! Yes, I understand now. I got my code working using JQuery $.post(...) method.

I'm wondering, what is the suggested approach for responding to unsuccessful requests where data in the Tabulator table should be reset to the old value (prior to editing)?

Many thanks!

c-zakkaroff on 9 Sep 2017

Hey,

each of the cell components in the table has an oldValue method that can be called to get its previous value, you could then use setValue to reapply this to the cell.

In the next release there will be a data validation extension to allow for advanced data entry.

Cheers

Oli

olifolkerd on 11 Sep 2017

Hi Oli,

Thank you for your response. I can see you've thought things through. This is a quality piece of work!

Best regards,
Constantine

c-zakkaroff on 13 Sep 2017

🎉3

I can't understand how to use those function :/

Please give me a pointers

cellEdited:function(cell){
    //This callback is called any time a cell is edidted

alert(cell);
$.ajax({

    url :"server.php",
    method :"post",
    data: {data:cell},
    success:function() {


    }


});
        }

How can I update the cell that I edited on my PHP file
just like ajax posting ? How can I send the Id of the specific columns and name to my
PHP ?

mobi35 on 13 Sep 2017

Thanks for your kind word @c-zakkaroff

olifolkerd on 13 Sep 2017

👍1

@mobi35
You can get the column and row components from the cell component that is passed into the callback using cell.getColumn() and cell.getRow() you can then use the getData, getFiled, and getIndex functions on these to get the data you need.

Checkout the documentation for Component Objects for more information.

Cheers

Oli

olifolkerd on 13 Sep 2017

@mobi35, here's a partial example from my prototyping, based on Oli's examples. The main thing is to define this callback, cellEdited. And in the callback one can call all those methods Oli mentioned, to their heart's content. The url property in the definition of the in the ajax call is where you want to send the data, and on the PHP side you catch the request as you'd normally deal with a POST (or GET) request. The success and error callbacks in this case just produce alert messages, but in a real world you'd put some useful code in them.

javascript $("#example-table").tabulator({ height: 205, // Set height of table. fitColumns: true, // Fit columns to width of table (optional). columns: [ // Define table columns. {title: "Name", field: "name", width: 150, editor:true}, // ... // ... ], rowClick: function(e, row) { // Trigger an alert message when the row is clicked. alert("Row " + row.getData().id + " Clicked!"); }, cellEdited:function(cell){ // This callback is called any time a cell is edited. $.ajax({ url: "response-request.php?action=update", data: cell.getRow().getData(), type: "post", success: function(response, textStatus, xhr){ alert("AJAX result: " + response + "; status: " + textStatus); }, error: function(XMLHttpRequest, textStatus, error){ alert("AJAX error: " + textStatus + "; " + error); } }) }, });

c-zakkaroff on 13 Sep 2017

👍2

Hi Oli,
Could you please give also give me some pointers on how to implement that cellEdited callback to an MVC controller?

I followed c-zakkaroff sample but couldn't get it to it the controller.

many thanks.

btw, great work. Thank you.

BobtheIdiot on 1 Aug 2018

Hey @BobtheIdiot

I cant really offer advice on how to do things server side as that is entirely dependent on the development stack you are using and your server architecture.

As explained above you can get all the data from the edited row in the cellEedited callback by cusing the cell component.