Datentabellen colspan Kopf

Question

Ich habe Tabelle wie diese

<table id="tbl_orderstatus" class="dataTable table table-bordered table-hover table-full-width nowrap" width="150%" data-table="tblorderstatus"> 
    <thead> 
     <tr> 
      <th>Buyer</th> 
      <th>Season</th> 
      <th>Style#</th> 
      <th>KP#</th> 
      <th>Item Description</th> 
      <th>Buyer PO</th> 
      <th colspan="2">Qty</th> 
      <th>Material</th> 
      <th>Destination</th> 
      <th>Delivery Date</th> 
     </tr> 
    </thead> 
</table> 

Aber mein Problem ist, ich habe gerade das ist <th colspan="2">Qty</th> Fehler machen, es sagte abgefangene Stil undifined. Wie mache ich Clospan so? Weil ich 2 Daten Spalte auf Menge setzen muss.

tq für die Antwort, ich wette ich muss zwei Zeilen im Header verwenden. tQ Jungs :)

Answer 1

Ich habe getestet, es läuft. Vielleicht vergessen Sie fügen Sie einen <td></td> hier Code eingeben

<table id="tbl_orderstatus" class="dataTable table table-bordered table-hover table-full-width nowrap" width="150%" data-table="tblorderstatus"> 
     <thead> 
      <tr> 
       <th>Buyer</th> 
       <th>Season</th> 
       <th>Style#</th> 
       <th>KP#</th> 
       <th>Item Description</th> 
       <th>Buyer PO</th> 
       <th colspan="2">Qty</th> 
       <th>Material</th> 
       <th>Destination</th> 
       <th>Delivery Date</th> 
      </tr> 
     </thead> 
     <tr> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test 1</td> 
      <td>Test 2</td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
     </tr> 
    </table> 

Answer 2

Sie benötigen einen Titel für jede Zeile zu setzen, so dass Ihre Header so sein sollte:

   <thead> 
        <tr> 
         <th rowspan="2">Buyer</th> 
         <th rowspan="2">Season</th> 
         <th rowspan="2">Style#</th> 
         <th rowspan="2">KP#</th> 
         <th rowspan="2">Item Description</th> 
         <th rowspan="2">Buyer PO</th> 
         <th colspan="2">Qty</th> 
         <th rowspan="2">Material</th> 
         <th rowspan="2">Destination</th> 
         <th rowspan="2">Delivery Date</th> 
        </tr> 
        <tr> 
         <th>Qty 1</th> 
         <th>Qty 2</th> 
        </tr> 
       </thead> 

      </table> 

Answer 3

Dies ist ein alter Thread, aber immer noch - ich Ich würde gern erzählen, was ich bei meinem eigenen Projekt herausgefunden habe. Ich brauchte im Grunde dasselbe - ich wollte einen Header über 3 Spalten spannen, ohne ihn aufzureißen und ihn in einer Reihe zu halten.

Sie haben den Fehler gesehen, weil jQuery DataTables eine einzelne Spalte für jedes Feld benötigt, um Handler oder was auch immer zuweisen zu können. Wir können den Fehler beheben, indem wir eine weitere Kopfzeile mit so vielen Kopfzeilenspalten hinzufügen, wie Sie überstreichen möchten. In meinem Fall habe ich 3 Header-Spalten hinzugefügt.

Jetzt ist der Fehler weg, aber die Kopfzeile sieht schrecklich aus. Sieht überflüssig aus, setzt aber alle anderen Header-Spalten der obersten Zeile so, dass sie sich über 2 Zeilen (rowspan) erstrecken. Und jetzt, die "Magie" - wie unsere Header Spalten in der 2. Zeile enthalten keinerlei Informationen, verstecken Sie sie einfach!

$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
});

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.js" 
 
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
    crossorigin="anonymous"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 
<table id="example" class="display" cellspacing="0" width="100%" style="text-align: center;"> 
 
    <thead> 
 
     <tr> 
 
      <th rowspan="2">One</th> 
 
      <th colspan="2">Two and Three</th> 
 
      <th rowspan="2">Four</th> 
 
      <th rowspan="2">Five</th> 
 
     </tr> 
 
     <tr style="display:none"> 
 
      <th></th> 
 
      <th></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> First data </td> 
 
      <td> Second data </td> 
 
      <td> Third data </td> 
 
      <td> Fourth data </td> 
 
      <td> Fifth data </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Voila. Dies war der sauberste Workaround, den ich produzieren konnte, aber es wird reichen.