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> 

Javascriptコード：

$(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が更新されました。