如何更新DataTables DOM？

我正在使用Datatables作爲評論系統，用戶可以通過單擊星標（1到5）對每個項目進行評分。如何更新DataTables DOM？

<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" 
    }); 
});

然而，當用戶的點擊進行分級一個項目，我改變的勇氣屬性排名的格但數據表不內更新它們的值。

點擊評級事件

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

來源

2012-09-18 dextervip

你使用了什麼星級評分插件？你的意思是「DOM沒有更新」？ –

@NicolaPeluchetti我不使用星級插件，它只是CSS。我的意思是說，數據表數據與我的文檔不一樣html – dextervip

當然不是，dataTables創建一個tabel對象並保持對象更新。我以爲你使用了一個插件，因爲我試圖做一個小提琴來複制這個和這條線starR = new StarRating（$（this）.parent（））;給出錯誤。如果你創建一個小提琴我會盡力幫你 –

更改值和插入回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-18 21:51:10 dextervip

我知道這是一分鐘，但一個簡單的選擇。

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

您可以使已更改的行或列無效，並且表將自行更新。此方法將保持搜索條件不變。

來源

2015-04-30 19:07:11 maleki

這是行不通的;它會恢復我的更改。 – IntelliData

這是因爲我不得不看這段代碼，但我的第一個猜測是你的DataTable正在重新查詢以再次顯示它的狀態。可能要在無效之前嘗試保存狀態。 – maleki

如何更新DataTables DOM？

回答

相關問題