return edited table as object?

CrisT · May 2016

Hello,

I want to use editor to make one column of a table editable. The content of the edited table needs to be available as an object that can then be used for other operations in another part of the page. I'm running into two issues:
1. When clicking to update the value of the editable field, I get an error message that a system error has occurred. The POST request seems to go through, and I don't know where/how to look for other potential issue, other than the Network tab to check out the ajax query.
2. I would like to have the content of the edited table available as a js object. I'm not finding how to do that.

Part of the problem is probably that javascript is not my first language and I'm still learning.
Can you please help?
Below is my code. Please let me know if I need to provide more info.

var url = "some_tsv.file";
var = tableContent;

d3.tsv(url, function(error, data){
    if (error){
        alert("Problem retrieving data");
        return;
    }

    $('#myDiv').empty();
    var myTableData = $.extend(true,[],data);
    myTableData.forEach(function(d){
        d.Comment = "";
    })
    var myHdgs = Object.keys(myTableData[0]);;
    var myData = myTableData.filter(function(d){
        // filter data on some parameter
        return d;
    });

    var myTableHeadings = [];
    var myTargets = [];
    var myEditorData =[];
    myHdgs.forEach(function(d,i) {
        myTableHeadings.push({"data": d, "title": d});
        myEditorData.push({"label" : d, "name" : d});
    });

    var myTableHTML = '<table id="mytable" class="display compact" cellspacing="0" width="100%"/>';

    var popcol = myHdgs.length - 2;
    for (var i=0; i<popcol;i++){
        myTargets.push(i);
    }
    $('#myDiv').html(myTableHTML);
    var editor = new $.fn.dataTable.Editor( {
        "ajax": {
            url: tableContent,
            data: function ( d ) {
               return JSON.stringify( d.data );
           }
        },
        "table": '#mytable',
        "fields": myEditorData,
        "idSrc": 'Population'
    });
    $('#mytable').on( 'click', 'tbody td:last-child', function (e) {
        editor.bubble( this );
    });
    var myTable = $('#mytable').DataTable({
      "columns": myTableHeadings,
      "data": myData,
      "order": [[ popcol, "asc" ]],
      "pageLength": 25, 
      "dom": '<"top"Bi>t<"bottom"lp><"clear">',
      "columnDefs": [{ 
            targets: myTargets,
            className: "dt-body-right"
      }],
      "buttons": [
        'copy', 'pdfHtml5','csvHtml5', 'colvis'
      ],
      "colReorder": true,
      "select": {
          style:    'os',
          selector: 'td:first-child'
       }
   });
});

Thanks!

allan · May 2016

Hi,

I get an error message that a system error has occurred. The POST request seems to go through, and I don't know where/how to look for other potential issue, other than the Network tab to check out the ajax query

That's exactly where to do. What does the Network tab show that the response from the server is? It will likely either include an error message, in which case that is the starting point of where to know where address the issue. Or it will be blank, in which case you need to check your server's error log (this might happen if you have error display disabled for example).

I would like to have the content of the edited table available as a js object. I'm not finding how to do that.

Could you provide a little bit more information about this. At what point do you want that object? Can you just use rows().data() to get the data for the table?

Allan

CrisT · May 2016

Hi Allan, Thank you for getting back to me so quickly.

I kept playing with the code and somehow magically got it to do what I wanted by using a function for the ajax call:

    function handleSubmit(method, url, d, successCallBack, errorCallBack) {
        var output = {data : myData};
        successCallBack(output);   
    };

and

    var editor = new $.fn.dataTable.Editor( {
        ajax: handleSubmit,
        table: '#mytable',
        fields: myEditorData,
        idSrc: 'Population'
    });

As for the object part, the 'preSubmit' API was the way to go:

    editor.on( 'preSubmit', function(e, object, action){
        var data = object.data;
        var key = Object.keys(data)[0];
        var count = object.data[key]['Comment'];
        myData.forEach(function(d){
            if (d.Population === key) {
                d.Comment = count;
            }
        });
        tableContent = $.extend(true, [], myData);
    });

It's still kind of clunky but I'm not sure how to make it less so.

allan · May 2016

Thanks for posting back - good to hear you got it working.

The good news is that Editor 1.6 should make this sort of thing a lot easier!

Allan

return edited table as object?

return edited table as object?

Answers

Howdy, Stranger!

Categories

DataTables

return edited table as object?

return edited table as object?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables