Datentabelle mit unterschiedlicher Spaltennummer pro Zeile

Question

Ich habe den folgenden Code, um eine Tabelle anzuzeigen, in der erste Zeile 8 Spalten enthält, um Daten anzuzeigen. Sobald der Benutzer auf die Zeile klickt, wird die nächste Zeile erweitert, um alle Details in einem Segment/Panel anzuzeigen. Das Problem jetzt, wenn ich ein Plugin verwende, um Sortierfunktionen hinzuzufügen. Das Problem beschwert sich, warum ich 8 Spalten in einer Zeile und nur eine Spalte in der zweiten Zeile habe.

    <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> 

Der Fehler wird wie hier erklärt: https://datatables.net/manual/tech-notes/4 Ich kann nicht scheinen, andere auf andere Weise als mit leeren ausgeblendeten Spalten zu finden, um die Zählung zu vervollständigen. Ich habe versucht, mit Colspan aber auch immer noch den Fehler zu bekommen.

Answer 1

Datentabelle erfordert die gleiche Anzahl von Spalten in jeder Zeile. Es gibt einen hacky Weg, Sie können den Rest der unerwünschten Reihe verstecken.

jsfiddle.net/9wppdkpe/

AKTUALISIERT:

Leider hat die Sortierung fuction, sonst deaktiviert sein wird die Toggle-Funktion nicht funktionieren.

$(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>