DT 1.10 - Update cell (HTML)

deliator

Hello,

Based on this :

var table = $('#example').DataTable();
 
$('#example tbody').on( 'click', 'td', function () {
    var cell = table.cell( this );
    cell.data( 'New value' ).draw();
} );

I need to update a particular cell (for exemple cell 8 of the selected row) after a success event of an ajax call.

Is this possible ?

Thank you

deliator

Anyone have an idea for solving my issue ?

Thanks :-)

allan

I'd need a little more information please. Is your other cell displayed using a rendering function? What happens if they click on cell index 8?

Allan

deliator

Hello Allan,

Thanks for the answer.
First, no, there is not rendering it's a simple html table for wich i need to modify one cell value.
Example here :

https://datatables.net/examples/api/select_single_row.html

imagine that i need to edit the selected row (the fifth) and in the modal form that opens i change the age from 28 to 32. How can i refresh the cell with the modified age ?

allan

Using the cell().data() method to write the new value into the cell as you have done should be all that is needed.

You can see that on the examples. In the browser's console type: $('#example').DataTable().cell(':eq(0)', 0).data('1'); and the first cell in the table will update.

Allan

deliator

How do you know if your are one the right row ?

Marc

allan

I'm afraid I don't understand the question.

Your code appears to work as expected if I just paste it in here: http://live.datatables.net/qobanuto/1/edit .

The cell() selector will automatically select the cell (i.e. the correct row and column) if passed in a cell node.

Allan

deliator

I can't put a working example because i'm working with external ajax call.

But the idea is :

• selecting one row of the table by clic --> ok for me
• get the data of each cell of the selected row --> ok for me
• open a modal and edit the data in a form --> ok for me
• in that form, change the age (in example) of the user ---> ok for me
• submit the form with an ajax call and modify the DB --> ok for me

and now thats the trick i need :

• update the cell containing the age of the user with the new value

ps : it's html not a server side datatable

Hope it's more explicit :-)

Thanks

allan

Are you able to modify my example to show the issue? The cell().data() method should be all that is needed to update the value in a cell. My guess is that you are losing the reference to the cell for some reason, but without being able to see it, its really impossible to say why.

Allan

deliator

Allan,

Here is a working example of what is needed.

You see that the new age is updated in the database but not in the html table.

Thanks

tangerine

You see that the new age is updated in the database but not in the html table.

The HTML table is not updated because your code doesn't update it.
Also, where in your code are you updating the database?
All you're doing is incrementing a number and displaying the result independently of the table.

allan

I agree - the example doesn't show cell().data() being used as a setter which we discussed above.

Allan

deliator

Hello,

Tanks for the answer.
Code updated.

@tangerine the update of the database is simulate in the variable named newAge.

I also added a counter (last column) to get the row number.

Question is how pass that rownum in parameter (2 is hardcoded)

$('#example').DataTable().cell(':eq(2)', 3).data( newAge );

Thanks

Marc

deliator

Found this solution, may i have your advice about it ?

https://jsfiddle.net/rotailed/dcv64034/5/

Thank you

Marc

allan

That looks fine. Its slightly more complicated than it needs to be - you don't need to set an id on the cell and then store that in the row - you could use table.row( { selected: true } ).index() to get the row index and then table.cell( rowIndex, 3 ).data( ... ) to set the value.

Allan

Deepa M G

Hi @allan .
The standard API table.cell( rowIndex, 3 ).data( ... ) does not work when i want to update the html content to the table cell.

    //Ajax call response
    success: function(data, status, xhttp) {
    if (action == "3") //Deactivate
    {
       updateCell = '<a class="action-over-holiday" title="Edit" value="1" name="'+holiday_id+'"> <i class="far fa-edit customizedicon"></i></a>';

    //Update table cell content with html button 
     holiday_table.cell('#'+holiday_id, 6).data(updateCell).draw();
    }
    }

colin

@Deepa M G We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin