javascript – 如何更新DataTables DOM？

我使用Datatables作为评论系统,用户可以通过点击星标(1到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>

我的JS

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

但是,当用户单击以对一个项目进行评级时,我会更改评级div中的valor属性,但是datatables不会在内部更新其值.

点击评分事件

$(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]);          

    });
});

如何更新数据表DOM？我已经获得了数据和更改了值但是如何更新回oTable？

解决方法:

更改值并插回到aData已经更新oTable

$('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());

    });

这是我找到的解决方案,看起来效果很好.

标签：javascript,jquery-datatables
来源： https://codeday.me/bug/20190709/1413671.html