Data after DOM update

El_Matella · October 2015

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 · October 2015

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 · October 2015

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 · October 2015

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

jLinux · October 2015

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 · November 2015

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 · November 2015

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 · November 2015

Your closing span tag on line 5 is broken, fyi

jLinux · November 2015

@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

Data after DOM update

Data after DOM update

Answers

Howdy, Stranger!

Categories

DataTables

Data after DOM update

Data after DOM update

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables