DataTables가 다른 페이지에서 자식을 제거합니다.

Question

지금은 몇 시간 동안 노력했지만이 문제를 해결할 수는 없습니다 ... 자식 행 안에 div를 표시하기 위해 DataTable에 jQuery-UI 아코디언 스타일 효과를 추가했습니다. 따라서 행을 클릭하면 자식이 추가되고 div가 확장됩니다. 동일한 행을 클릭하면 div가 애니메이션과 함께 숨겨지고 자식이 제거됩니다. 자식이 열려있는 동안 다른 행을 클릭하면 첫 번째 자식 div가 숨겨지고 첫 번째 자식이 제거 된 다음 새 자식이 추가되고 div가 표시됩니다.

각 페이지에서 정상적으로 작동합니다. 그러나 페이지를 전환하면 첫 번째 자식은 제거되지 않습니다.

이 코드를 가지고 :

var openschoolingschild = "nothing"; //Variable to store css-id of row which has an open child 
var openschoolingsrow = ""; //Variable to store which row has a child 


$('#training_management_schoolings_items_table tbody').on('click', 'tr', function() { 
    var tr = $(this).closest('tr'); 
    var row = oTable.row(tr); 
    var thisid = $(this).attr('id'); 
    $('#training_management_schoolings_items_table tbody tr').removeClass('shown'); 
    if (row.child.isShown()) { 
     $('#'+thisid+'_details').hide("blind",300,function(){ 
      row.child.remove(); 
      tr.removeClass('shown'); 
     }); 
     openschoolingschild = "nothing"; 
     openschoolingsrow =""; 
    } 
    else { 
     if (openschoolingschild != "nothing") { 
     $('#'+openschoolingschild+'_details').hide("blind",300,function(){ 
      $("#"+openschoolingschild).removeClass('shown'); 
      openschoolingsrow.child.remove(); 
     }); 
     row.child(training_management_details(thisid) , "training_management_schoolings_table_child").show(); 
     tr.addClass('shown'); 
     $('#'+thisid+'_details').show("blind",300,function(){ 
      openschoolingschild = thisid; 
      openschoolingsrow = row; 
      preventcollapse(); 
      }); 
     } 
     else { 
     row.child(training_management_details(thisid), "training_management_schoolings_table_child").show(); 
     tr.addClass('shown'); 
     $('#'+thisid+'_details').show("blind",300,function(){ 
      preventcollapse(); 
      openschoolingschild = tr.attr('id'); 
      openschoolingsrow = row; 
     }); 
     } 
    } 
    }); 

JQuery와 -에 - 부분 DataTables init.DT - 콜백 함수 내에서 실행하고 보는 바와 같이 나는 전역 변수에 아이가있는 행을 저장한다 .

페이지를 전환 할 때 DOM에 없기 때문에 하위를 제거 할 수 없습니다. 그러나 DataTables는 여전히 데이터를 보유하고 있으며 DataTables 매뉴얼 및 포럼에 따라 "숨겨진"부분에 액세스 할 수 있습니다. 나는 테이블의 서버 측 프로세싱을 사용하지 않는다.

무엇이 누락 되었습니까?

Answer 1

음, 어리석은 나를. 방금 해결책을 찾았습니다. 해결 방법이 더 많지만 페이지를 변경하거나 테이블을 다시 그릴 때 자녀를 열어 두지 않아도되므로 문제가되지 않습니다.

"fnInfoCallback": function(){ 
     if (row != undefined) { 
     row.child.remove(); 
     } 

행을 전역 변수로 지정하여 영구적으로 유지했습니다.