每行不同列号的数据表

Question

我有以下代码来显示一个表，其中第一行包含8列以显示数据。一旦用户点击该行，它将展开下一行以显示段/面板中的所有详细信息。现在，我正在使用插件添加排序功能的问题。这个问题抱怨我为什么在一行中有8列，第二行只有一列。

    <tr id="row-<?php echo $_id?>" class="trigger <?php echo $_rma->getIsEven() ? 'even' : 'odd'?>"> 
         <td class="small-1"><a class="action" href="#" onclick="return false"><span></span></a></td> 
         <td class="small-1"><?php echo $_rma->getIncrementId() ?></td> 
         <td class="small-2"><?php echo $_rma->getOrderIncrementId() ?></td> 
         <td class="small-2"><?php echo $_orderDate ?></td> 
         <td class="small-2"><?php echo Mage::helper('core')->formatDate($_rma->getCreatedAt(), 'short', true) ?></td> 
         <td class="small-2" id="status-<?php echo $_id ?>"><?php echo $_rma->getRmaStatusName() ?></td> 
         <td class="small-1" id="reason-<?php echo $_id ?>"><?php echo $_rma->getRmaReasonName() ?></td> 
         <td class="small-1"><?php echo $_rma->getTotalQty()*1 ?></td> 
        </tr> 
        <tr id="info-<?php echo $_id?>" style="display:none"> 
         <td id="container-<?php echo $_id?>" class="small-12 no-pad" colspan="12"> 
          <span class="urma-info-loader"><?php echo Mage::helper('udropship')->__('Please wait, loading RMA information...')?></span> 
         </td> 
        </tr> 

的误差如下解释：https://datatables.net/manual/tech-notes/4 我似乎无法找到比为空隐藏的列来完成计数等其他方式。我尝试使用colspan，但仍然出现错误。

Answer 1

Datatable需要每行的列数相同。这是一种拙劣的方式，你可以隐藏其余不需要的行。

jsfiddle.net/9wppdkpe/

更新：

不幸的是，分类功能已被禁用，否则切换功能将无法正常工作。

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    // This has to be disabled otherwise, the toggle fuction won't work 
 
    "ordering": false, 
 
    rowCallback: function(row, data) { 
 
     if ($(row).hasClass('target')) { 
 
     if ($(row).find('td').not('.colspan').length > 0) { 
 
      $(row).find('td').not('.colspan').remove(); 
 
     } 
 
     $(row).find('.colspan').attr('colspan', 5); 
 
     } 
 
    }, 
 
    }); 
 
    $('#example').on('click', '.clickable', function() { 
 
    $(this).next('.target').toggle(); 
 
    }); 
 
});

.clickable { 
 
    cursor: pointer; 
 
} 
 

 
.target { 
 
    display: none; 
 
} 
 

 
.colspan { 
 
    text-align: center; 
 
}

<table id="example"> 
 
    <thead> 
 
    <tr> 
 
     <th>Heading 1</th> 
 
     <th>Heading 2</th> 
 
     <th>Heading 3</th> 
 
     <th>Heading 4</th> 
 
     <th>Heading 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="clickable"> 
 
     <td>Click me 1</td> 
 
     <td>Click me 1</td> 
 
     <td>Click me 1</td> 
 
     <td>Click me 1</td> 
 
     <td>Click me 1</td> 
 
    </tr> 
 
    <tr class="target"> 
 
     <td class="colspan">Colspan row 1</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr class="clickable"> 
 
     <td>Click me 2</td> 
 
     <td>Click me 2</td> 
 
     <td>Click me 2</td> 
 
     <td>Click me 2</td> 
 
     <td>Click me 2</td> 
 
    </tr> 
 
    <tr class="target"> 
 
     <td class="colspan">Colspan 2</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>