Data after DOM update

El_Matella

Hi, I am trying to manipulate data with datatables but I am having a problem with the update of the data.

Let's imagine I have a simple table:

<table>
    <thead>
        <th>My Title</th>
    </thead>
    <tbody>
        <tr>
            <td class="data">My Data</td>
        </tr>
    </tbody>
</table>

With Javascript I am changing the DOM (with x-editable), and the td content is changing. But the, when I try to take the data, the old data is returning:

$('table tbody').on( 'click', '.data', function () {
    var isSelected = false;
    var data = table.row( $(this).parents('tr') ).data();
    console.log(data);
});

And I would like to know how to fix that :)

Tell me if my question is not good, I will try to ask it in a better way.

Thanks a lot for your answers and have a nice day!

jLinux

I use x-editable too actually.. you have to change the dom, then invalidate the row.

And ill tell you after i spent a long long time using the dom as the source for my DT, which uses xeditable... its 100x easier using AJAX as the source, then drawing up the links in the createdRow.

I can show you all my code if ya want, it now uses ajax, but i can find the dom version in my revision history

El_Matella

Hi, I am actually using Ajax as data source for the table, I used the DOM for the example in this post..

I am going to look at your code, thanks a lot for sharing!

I will maybe have some questions after that :)

jLinux

Np bud. Post the questions in threads tho, ill answer accordingly. You can pm me when you make new threads tho

jLinux

I use the AJAX source and update the table after any updates via the ajax.reload() function.

@allan, is it possible to reload the data that DataTables has, without reloading the entire table? Then just update the one row thats different?

Im not sure if its possible to update the data source without reloading the entire table

allan

Yes, but that isn't really a built in function since it is a function of whatever setup you have. At the moment you'd need to use row.data() to tell DataTables: 1. which row to update, and 2. what data to update it work.

Allan

El_Matella

Hi, this is exactly what I did, here is the final code, if it can help someone in the future:

var table = $('#Table').DataTable( {
    "ajax": $('#Table').data('json'),
    "columns": '...',
    "deferRender": true,
    "createdRow": '...'
});

And the most important part is in the createdRow callback:

"createdRow": function(row,data,dataIndex){
    var count = 0;
    $(row).find( 'td' ).each(function(i,td){
        // First thing I do is adding a <span> tag to the content to prevent <td> transformation in <span> by x-editable
        $(td).html('<span>' + $(td).html() +'</span');
        // Then, I initialize x-editable on every cell, depending on the column (count)
        switch(count){
            case 2:
                // Here, we are in the second column (count == 2) where the name of the column is "name"
                var name = 'name';
                // Let's begin with x-editable
                $(td).find('span').editable({
                    type: 'text',
                    pk: data.id,
                    url: '{{ path('home') }}products/xeditable/' + data.id,
                    name: name,
                    success: function(response, newValue){
                        table.row($(td).parents('tr')).data().name = newValue;
                    }
                });
                // As you can see, the key is in the "success" callback of the editable() function. The data is updated!
                break;
                // ...
        }
        count++;
    });
}

As you can see, I am using the row.data() to update value :)

jLinux

Your closing span tag on line 5 is broken, fyi

jLinux

@EL_Matella the issue i had was i wanted to update more than just THAT item in the row, i had columns for "modified" and "modifier", so what i did (before uaing ajax on the table) was have the response body from the x-editable source be the new row content, then update the row with that

Might be useful to you