DataTables - 忽略使用colspan向下钻取行

时间:2013-10-25 09:59:22

标签: javascript jquery

我在我的网络应用程序中使用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模板。

1 个答案:

答案 0 :(得分:1)

数据表要求表中的每一行都有相同数量的单元格。

这是你需要做的:

  1. 缓存所有向下钻取行
  2. 将jQuery数据中的缓存行放入.main-row
  3. 从表格中删除所有向下钻取的行
  4. 初始化DataTables
  5. 单击时绑定.main-row以从数据中插入缓存的行。

  6. 使用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);
            }
        });
    });