Question

What is the best way to upload data entered by user in jQuery Handsontable back to Server to be saved into database?

The existing onChange callback seems to be very verbose to save input data using AJAX especially if user insert new data row above existing one.
Looking for functionality to upload input data after complete the editing using Handsontable or jQuery

Here is the full code using jQuery to loop the input data and dump into text box in JSON format then submit to server. This process look ugly. looking for a cleaner way..

$('#btnGo').click(function() {

    var rowList = new Array();
    $("table tr").each(function() {
        var colList = new Array();
        $("td", this).each(function() {
            colList.push($(this).text());
        });
        rowList.push(colList);
    });
    $('#simple').val(JSON.stringify(rowList));
    console.log(rowList);
});​

Answer 1

There is a build in method for getting the whole array of table data: .handsontable("getData")

You can use it like this:

$('#btnGo').click(function() {
  var rowList = $("#example9grid").handsontable("getData");
  $('#simple').val(JSON.stringify(rowList));
  console.log(rowList);
});​

Working example: http://jsfiddle.net/warpech/bwv2s/20/