Editor Table redraw

sushmas

Hi,
A newbie question.

I have a datatable that I populate and then attach it with an editor. After edit and submit, I send data using ajax to a JS function and update the database. Now I need to display the updated data back in the table. I did not understand on how to do that from Editor examples (Inline editing with submit button).

My snippet :

function populate_table(){
$('#mytable').dataTable().fnClearTable();
$('#mytable').dataTable().fnAddTable(all_components);
}

var editor;
$(document).ready(function(){
    populate_table();
    editor = new $.fn.dataTable.Editor({
        table: "#mytable",
        fields: [{
              label:
              type:
             },
            ----
            ----
            }
        ],
       ajax: function (method, url, data, success, error){
              refresh_table(data)  
       }
    }); 
    var cau_tab = $('#mytable').DataTable({ 
        'data': [], 
        'columns': [{'data':'component'}, 
                          {'data':'version', editField: "version"}, 
                          {'data':'license'}
                         ]
                        'pagingType':'full_numbers' }); 
     cau_tab.on( 'click', 'tbody td:not(:first-child)', function (e) { 
          var myRow = this.parentNode; 
          editor.inline( this,{ 
                    buttons: { label: '>', fn: function () { this.submit(); } } } ); 
          editor.on( 'preSubmit', function ( e, data ) { 
                    data.rowData = cau_tab.row( myRow ).data(); 
          } ); 
     } ); 

I am calling "populate_table()" in "refresh_table" of Editor to update the table with it's new contents, but I don't see the editor features attached to it when it is refreshed.

Please suggest a way. Can I use "draw()" ? If so how?
Thank you

allan

Hi,

Does your refresh_table function implement the client / server communication required by Editor. And if so, you should call the success callback function that is passed into ajax with the returned JSON data.

Allan

sushmas

Hi Allan,

Thank you for your response. my refresh_table function has calls to the backend to save the necessary data and now with your suggestion am passing the updated data to the success callback.
But my data is a "list of objects" where each object forms a row in the table. I pass the same to populate the table when the page loads:
$('#mytable').dataTable().fnAddTable(all_components);

But when I use this similar data structure with success callback, I get this error:
"uncaught typeerror cannot read property 'length' of undefined.

Looks like I am getting data correctly into the success callback, but for some it cannot be read by the datatable.
Thanks

sushmas

Hi Allan,

I also tried similar to this:

ajax: function ( method, url, d, successCallback, errorCallback ) {
           var output = { data: [] };
         if ( d.action === 'edit' ) {
        var key = Object.keys(d.data)[0];
                var editedRow = d.data[Object.keys(d.data)[0]];
                editedRow.id = key;
                output.data.push(editedRow);
            }
 
        successCallback(output);

I get -
Uncaught TypeError : b.any is not a function. Looks like this is from datatables.editor.min.js.

Please suggest a way.
Thank you

allan

The any() method was introduced in DataTables 1.10.8. Could you check which version you are using please?

Allan

sushmas

Allan, I am using DataTables Editor 1.5.0 and dataTable version 1.10.4.
Thanks,
Sushma

sushmas

I have just updated to latest DataTables version. The above error went away.
Thanks Allan.

I still have problems displaying back my data though. I am working towards that.