DataTables.js：新しい値があることをテーブルが認識できるようにセルを更新した後にテーブルを再レンダリングする方法

Question

私はDataTablesの初心者です。私は巨大な（私にとって）どのように解決するかを得る。ここで私のライブデモhttps://codepen.io/Balzzac/pen/mpdGgLは、ある場所で質問があります。

説明してみましょう：私はAJAXコール（codepen - 変数dataSetから）からデータを取得するテーブル（id = 'js_table'）を持っています。それは2つの列： "割り当て"と "名前"があります。データが来ると、最初の列がレンダリングされ、 "yes"/"no"をtype === "display"の円と "else"の "assigned"/"not assigned"で置き換えて、人を割り当てるか割り当てを解除するために円をクリックする機会。

JSはサークル（js_assign_element）をクリックすると、クラス（緑色から赤色、またはその逆）を置き換える機能を実行するだけでなく、割り当てられていないときにデータ属性を「割り当て済み」に変更し、人がいないときは割り当てられていません。しかし、表自体は変更を理解/認識しないため、変更が行われなかったので、最初の列がソートされ、フィルタリングされます。

$(document).off('click', '.js_assign_element').on('click', '.js_assign_element', function (event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    if ($(this).hasClass("__assigned")) { 
     $(this).removeClass("__assigned").attr("data-search", "not assigned").attr("data-filter", "not assigned").attr("data-sort", "not assigned").attr("data-order", "not assigned") 
    } 
    else 
    { 
     $(this).addClass("__assigned").attr("data-search", "assigned").attr("data-filter", "assigned").attr("data-sort", "assigned").attr("data-order", "assigned") 
    } 

    // Tried Following: 
    // $("#js_table").DataTable().draw() - doesn't work 
    // $("#js_table").DataTable().rows().invalidate("dom").draw() - doesn't work 
    // $("#js_table").DataTable().rows().invalidate().draw() - doesn't work either 
}) 

あなたは私の質問を見て、私を助けてくれますか？ありがとう

Answer 1

また、データの配列を更新する必要があります。変更された値を含む新しいデータでデータを変更するだけです。

前のテーブルをクリアし、変更したデータをテーブルに追加して再描画します。

$(document).off('click', '.js_assign_element').on('click', '.js_assign_element', function (event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    if ($(this).hasClass("__assigned")) { 
     $(this).removeClass("__assigned").attr("data-search", "not assigned").attr("data-filter", "not assigned").attr("data-sort", "not assigned").attr("data-order", "not assigned") 
    } 
    else 
    { 
     $(this).addClass("__assigned").attr("data-search", "assigned").attr("data-filter", "assigned").attr("data-sort", "assigned").attr("data-order", "assigned") 
    } 


    var test = $(this).parents('tr').find('td:eq(1)').html(); 

    var setval = ($(this).hasClass('element_assign __assigned'))? 'yes' : 'no'; 


    $.each(dataSet, function(i,v){ 
     var tes = v.indexOf(test); 
     // tez[i] = ['yes', test]; 
     if(v[1] === test){ 
      //console.log(v); 
      //console.log(dataSet[i][0]); 
     dataSet[i][0] = setval; 
     } 
    }) 


    $('#js_table').DataTable().clear().draw(); 
    $('#js_table').DataTable().rows.add(dataSet); // Add new modified data 
    $('#js_table').DataTable().columns.adjust().draw(); // Redraw the DataTable 


    // Tried Following: 
    // $("#js_table").DataTable().draw() - doesn't work 
    // $("#js_table").DataTable().rows().invalidate("dom").draw() - doesn't work 
    // $("#js_table").DataTable().rows().invalidate().draw() - doesn't work either 
}) 

ここで働くの例を参照してください： https://codepen.io/anon/pen/KZKOzx