DataTables 응답 : 열이 숨겨져있을 때 행 제거

Question

DataTables을 사용하여 표를 만듭니다.

멋진 도구이지만 모든 열을 표시 할 공간이 충분하지 않은 모바일 또는 기타 소형 장치에서 눈금 열을 숨길 때 발생하는 문제가 있습니다.

문제 :

열이 숨겨져있는 경우 그리드 행을 제거. 열이 표시되면 잘 작동합니다.

표 코드 :

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Remove</th> 
    </tr> 
    </thead> 

    <tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Remove</th> 
    </tr> 
    </tfoot> 

    <tbody> 
    <tr> 
     <td>Tiger Nixon</td> 
     <td>System Architect</td> 
     <td>Edinburgh</td> 
     <td>61</td> 
     <td>2011/04/25</td> 
     <td> 
     <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button> 
     </td> 
    </tr> 
    <tr> 
     <td>Jena Gaines</td> 
     <td>Office Manager</td> 
     <td>London</td> 
     <td>30</td> 
     <td>2008/12/19</td> 
     <td> 
     <button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button> 
     </td> 
    </tr> 

    </tbody> 
</table> 

자바 스크립트 코드 :

$(document).ready(function() { 
    $('#example').DataTable({ 
    responsive: true 
    }); 
}); 

$(".removeRow").click(function() { 
    var table = $('#example').DataTable(); 
    table.row($(this).parents('tr')).remove().draw(); 
}); 

내가 jsfiddle에 링크를 연결하고 있습니다. 열이 표시되면 명확하게 표시되고 열이 숨겨지면 열리는 것을 분명히 볼 수 있습니다.

다른 사람이 유사한 문제를 발견했는지 궁금합니다. 도움을 주시면 감사하겠습니다.

Answer 1

문제를 해결할 수있었습니다. 다른 사람이 비슷한 문제가 생길 경우를 대비하여 게시하기로 결정했습니다.

열이 접힐 때 HTML 구조가 변경되어 작동하지 않습니다. 이 문제를 해결하기 위해 열이 축소되었는지 여부를 확인하기 위해 추가 검사를 추가했습니다.

개정 코드 :

$(document).on("click", ".removeRow", function() { 
    var table = $('#example').DataTable(); 
    var row; 

    console.log($(this).closest('table')); 
    if($(this).closest('table').hasClass("collapsed")) { 
    var child = $(this).parents("tr.child"); 
    row = $(child).prevAll(".parent"); 
    } else { 
    row = $(this).parents('tr'); 
    } 

    table.row(row).remove().draw(); 

}); 

것은 그것은 지금은 잘 작동합니다.

여기 업데이트 됨 jsfiddle입니다.