javascript - 如何更新 DataTables DOM？

Question

我正在使用数据表作为评论系统，用户可以通过点击星号（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">☆&lt;/span><span valor="4">☆&lt;/span><span valor="3">☆&lt;/span><span valor="2">☆&lt;/span><span valor="1">☆&lt;/span>
            </div>
        </td>
    </tr>
     ....
    </tbody>
</table>

我的JS

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

但是，当用户单击对一个项目进行评分时，我会更改评分 div 中的 valor 属性，但数据表不会在内部更新它们的值。

点击评分事件

$(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？

Answer 1

更改值并插入回 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());

    });

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

Answer 2

我知道已经过了一分钟，但这是一个简单的选择。

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

您可以使已更改的行或列无效，并且表将自行更新。此方法将保持搜索条件不变。