4

レビューシステムに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">☆&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"
    } );
});

ただし、ユーザーがクリックして1つのアイテムを評価すると、評価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]);          

    });
});

Datatables DOMを更新するにはどうすればよいですか？すでにデータを取得して値を変更しましたが、どうすればoTableに更新できますか？

4

2 に答える 2

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

    });

それは私が見つけた解決策であり、かなりうまく機能しているようです。

于 2012-09-18T21:51:10.940 に答える
0

ほんの数分でしたが、簡単な代替手段です。

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

変更された行または列を無効にすると、テーブルが自動的に更新されます。この方法では、検索条件はそのまま維持されます。

于 2015-04-30T19:07:11.850 に答える