How to update DataTables DOM?

Question

I use Datatables for a review system. The user can rate each element by clicking on the stars (1 to 5).

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="tabela-disciplinas-preferencia"> <thead> <tr> <th>Semestre</th> <th>Curso</th> <th>Disciplina</th> <th>Nível de Interesse</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Engenharia de Software</td> <td>Redes</td> <td> <div class="rating" valor="0"> <span valor="5">☆</span><span valor="4">☆</span><span valor="3">☆</span><span valor="2">☆</span><span valor="1">☆</span> </div> </td> </tr> .... </tbody> </table> 

My js

 $(document).ready(function() { $('#tabela-disciplinas-preferencia').dataTable( { "sPaginationType": "bootstrap" } ); }); 

However, when the user clicks to evaluate a single item, I change the valor attribute in the rating div, but datatables does not update its values ​​internally.

Click Rating Event

 $(document).ready(function() { $('div.rating span').click(function(){ starR= new StarRating( $(this).parent()); starR.changeValue($(this).attr('valor')); //Get TR Element aPos = oTable.fnGetPosition( $(this).parent().parent().get(0) ); aData = oTable.fnGetData( aPos[0] ); //Get rating div rating = aData[3]; aData[3] = $(rating).attr('valor', $(this).attr('valor')); // ???? oTable.fnUpdate(aData[3]); }); }); 

How to update Datatables DOM? I already received the data and changed the value, but how can I return to oTable?

Answer 1

Changing values ​​and inserting back into aData is already an oTable update

 $('div.rating span').click(function(){ starR= new StarRating($(this).parent()); starR.changeValue($(this).attr('valor')); //update oTable row data aPos = oTable.fnGetPosition( $(this).parent().parent().get(0) ); aData = oTable.fnGetData( aPos[0] ); aData[3] = $(aData[3]).attr('valor', starR.getValue()); }); 

This is a solution that I have found and seems to work very well.

Answer 2

I know this is a minute, but a simple alternative.

 $('div.rating span').click(function () { //Invalidate Row after DOM manipulation var parentRow = $(this).closest('tr'); $('#your-table').DataTable().row(parentRow).invalidate().draw(); } 

You can invalidate the rows (rows) or columns (columns) that have been changed, and the table will update itself. This method will save the search criteria.