DataTables.js : 테이블을 새 값으로 인식 할 수 있도록 셀을 업데이트 한 후 테이블을 다시 렌더링하는 방법

Question

DataTables의 초보자이며 거대한 (나에게) 문제가 발생했습니다. 해결 방법을 얻지 마십시오. 다음은 특정 장소에서 질문이있는 라이브 데모 https://codepen.io/Balzzac/pen/mpdGgL입니다.

설명해 드리겠습니다 : AJAX 호출에서 데이터를 가져 오는 테이블 (id = 'js_table')이 있습니다 (가변 데이터 세트의 codepen에서). 그것에는 "할당 됨"과 "이름"의 2 개의 열이 있습니다. 데이터가 올 때 첫 번째 열을 렌더링하고 "예"/ "아니요"를 === "표시"유형의 서클과 "할당 됨"/ "할당되지 않음"을 "else"로 대체하여 멋지게 보이게하고 사용자에게 제공합니다. 사람을 할당하거나 할당 해제하기 위해 원을 클릭하여 기회.

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