DataTables响应:隐藏列时删除行
DataTables响应:隐藏列时删除行
提问于 2016-10-09 20:11:49
我正在使用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();
});我是附加到小提琴的链接。您可以清楚地看到，当显示列时，它可以工作；当列被隐藏时，它会中断。
我想知道是否有其他人遇到类似的问题，如果有任何帮助，我们将不胜感激。
Stack Overflow用户
回答已采纳
发布于 2016-10-09 21:29:55
我设法解决了这个问题。我决定发出去，以防其他人有类似的问题。
这不起作用，因为当列折叠时，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();
});现在一切都很顺利。
这里是更新的小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39948069
复制相关文章
相似问题
腾讯云开发者
