Saving date added with "Add / Delete rows" example

[MvErven]

Hello,

Question: As a beginner with no programming skills I'm always eager to learn. I found this Tabulator very interesting to my needs.

I've got the example.html up and running. Created a copy of the examples.html file and renamed it to "exam1.html" I've went trough a lot of sections, some are useful to me, some are not. So I've removed the sections which I don't need. Leaving the section "Add/delete rows and columns"

The exam1.html runs fine. I can add a row. Edit this row. But I can't figure out how this new row to be saved or added to the example "tabledata" in this very same "exam1.html" file. Please advice.

Michiel. Edit: Uploaded the html file as a txt, and removed the buttons as I'm confused, how to use these mutators. exam1.txt

[olifolkerd]

If you want to retrieve data from the table you can use the getData method which will return an array of all data currently in the table:

var data = $("#example-table").tabulator("getData");

You only need to use mutators if you want to change the data as it is being parsed into the table, if you are happy with the data you are using then you wont need to use them.

There are a load of interactive demos of the tables on the website http://olifolkerd.github.io/tabulator/examples/

Each of the demos has a green "view source" button under it that will show you the code needed to produce that sort of table. they also have links to the relevant bit of the documentation to guide you through its use.

If you have a specific usage case in mind, let me know the details and i can suggest a tabulator constructor that would work for you.

[MvErven]

Thank you for your swift reply. Yes indeed, I wish to SAVE a new created row in the tabledata, in the same html file. (Or it can be a different (txt, html, csv file))

The example was confusing to me. There was no "SAVE row" button. (The UpdateRow only speciefies an ID and not the entire row or table)

I'm happy with a button and a save-row example. ;-)

Thank you in advance.

EDIT:

I've been looking, at the example:

Update Row You can update any row in the table using the updateRow function. The first argument of this function should be the index of the row you want to update (the index field being defined by the index option in the tabulator constructor, which defaults to "id"), alternativly you could pass a jQuery object of the row itself. ??? The second function should be the updated data object for the row. as per the updateData function, this will not replace the exisiting row data object, it will only update any of the provided parameters. $("#example-table").tabulator("updateRow", 1, {id:1, name:"bob", gender:"male"}); Once complete, this function will trigger the rowUpdated and dataEdited events. This function will return true if the update was successfull or false if the requested row could not be found. If the new data matches the existing row data, no update will be performed. It is worth noting that if you have defined any mutator functions in your column definition array, these will be applied to the new data before the row is updated. (see Mutators for more details)

[olifolkerd]

Tabulator has no in-built method of saving data to a file, however it is easy to achieve with a bit of JavaScript:

function downloadData(){
    //get data from tabulator
    var data = $("#example-table").tabulator("getData");

    //generate header row
    var csvContent = [Object.keys(data[0]).join(",")];

    //generate each row of the table
    data.forEach(function(row){
        var rowString = Object.values(row).join(",");
        csvContent.push(rowString);
    });

    //generate temporary link element to hold data
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent.join("\n")));
    element.setAttribute('download', "table_data.csv");

    //trigger download link and remove temporary element
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

You could then call the downloadData function on a button click to trigger the download

[MvErven]

Great! I Actually did manage to get this to work. Thank you for explaining. Except the new rows don't have any ID's I've read it can also be a JSON file so it can be read back into the table? (I mean, when someone presses F5, the new (added) row(s) do not show at this point. Then I can close this case.

Many thanks so far.

[olifolkerd]

If you want to be able to store things locally in the persons web browser then you could use the localSotrage object for that, though these wouldn't be available to anyone else that viewed the page, for that sort of thing you would need to look at using a database server.

The new rows wont have id's, these would normally be created by whichever data storage system you use, so it would be inappropriate for tabulator to generate them.

To use the localStorage functionality you will need two bits of code, one to store the data when it is changed, another to load it when the table first loads.

For storing data we are going to make use of the dataEdited call back which is triggered whenever data is changed in the table:

$("#example-table").tabulator({
    columns:[...], //Your usual column definition array
    dataEdited:function(data){
        //JSON encode data and store in local storage.
        localStorage.setItem("tabulator-data", JSON.stringify(data));
    },
});

Then to load the data when the user loads the page:

$(document).ready(function() {
    //Load any saved data from localStorage
    var data =  localStorage.getItem("tabulator-data");

    //If data is present fill the table with it
    if(data){
        $("#example-table").tabulator("setData", JSON.parse(data));
    }
});

It is worth noting there is currently a 5Mb limit to local storage so you couldnt store 1000's of rows this way.

[beauhaus]

This is witchcraft.<3

[olifolkerd]

There was a small error in the $(document).ready function example above, which has now been corrected!

(it said localStorage.setItem instead of localStorage.getItem)

[MvErven]

Hello again. Thank you for your advice. Well this also works. However (sorry... ) Why would it not be possible to store the added row into the (ajax_sim.php?) and reload this AJAX data?

Still little confused about the data location and saving new row. (local var in html, localsetting, ajax-file, or even a db)

mverven_excercise.zip

I've added my exercise html file (which works) The prognose is it will not contain more than 500 lines of "customers" The set-data example on your page, suggested (for me as a novice) a new row gets added to the table and stored in a file.

Sorry for the persistence. Michiel.

[olifolkerd]

Hi Michiel.

No need to apologise, everyone has to start somewhere.

The browser cannot write back to files on the server directly, it is not possible. It can only make requests to the server and then it is up to the server to make and changes to databases or files from there. (this is true even if the server and the browser happen to be on the same computer, it is a web security thing, you wouldn't want anyone with a browser being able to change the content of your server)

So if you wanted to go down that route you would need to make a request to the server using javascript, then use some server side code (PHP for example) to write the updated information to disk. Though the recommended way would be to store the information in a database and then generate the response with the data using PHP every time a request was made.

It is a bit beyond the scope of advice i can offer you here to do this as there would be a fair bit of background reading. You would need to learn about handling requests, communicating with database's and basic request security, but i can point you in the direction of some tutorials that will help you understand how all this works, and give you a simple step by step guide to understanding how to use PHP.

Here are a great set of tutorials that will take you through how PHP server side scripting works and how to setup your server and database: https://devzone.zend.com/6/php-101-php-for-the-absolute-beginner/

[MvErven]

Okay, Thank you for your efforts. Will bookmark your link, and start reading. I'll save all previous examples. (Who knows)

Take care. Michiel.

[olifolkerd]

In case it is of any use to you i have added the ability to download a csv file directly from tabulator using the new download function:

$("#example-table").tabulator("download", "csv", "data.csv");

Full documentation on this feature can be found here.