我在我的 Web 应用程序中使用 DataTables 作为表格。该表列出了数据库中的一些数据。
我决定进行深入研究,当您单击该行时,它将切换下面的另一行以显示更多详细信息。
我现在就有这个。
<tr class="main-row">
<td></td>
<td></td>
<td></td>
</tr>
<tr class="drill-down-row">
<td colspan="3">
// Drill down content here
</td>
</tr>
JS:
$(document).on('click', '.main-row', function(event){
var $line = $(this);
$line.next('.drill-down-row').toggle();
});
添加向下钻取行后,DataTables 崩溃了,因为新行只有 1 个单元格。我到处搜索,但找不到忽略该行的方法。
我确实需要利用 django 的模板渲染器,并且不喜欢使用 JavaScript 模板。
最佳答案
Datatables 要求表格中的每一行都具有相同数量的单元格。
这是您需要做的:
- 缓存所有向下钻取行
- 将 jQuery 数据中缓存的行放入
.main-row
- 从表格中删除所有向下钻取的行
- 初始化数据表
- 单击时绑定(bind)
.main-row
,将数据中的缓存行插入到其自身之后。
Javascript:
$(function(){
// CACHE THEN DELETE ALL DRILL DOWN ROWS !!
$('.main-row').each(function(){
var $row = $(this);
var $rowmore = $row.next('.drill-down-row');
if($rowmore.length>0){
$row.data('cached-row', $rowmore);
}
});
$('.drill-down-row').remove();
// INITIALIZE YOUR DATATABLE HERE !!!!
$(document).on('click', '.main-row', function(event){
var $line = $(this);
if($line.data('cached-row')){
$line.data('cached-row').toggle().insertAfter($line);
}
});
});
关于javascript - DataTables - 忽略使用 colspan 向下钻取行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19586726/