數據表列跨度頭

我有臺這樣的數據表列跨度頭

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

但我的問題是，我只是把<th colspan="2">Qty</th>這就是使誤差，故稱未捕獲的風格undifined。我如何做這樣的clospan？因爲我需要在數量上放2個數據列。

tq爲答案，我敢打賭，我必須在頭上使用兩行。 tQ夥計:)

來源

2016-11-15 Wolfzmus

請嘗試以下** [此示例]（https://datatables.net/examples/basic_init/complex_header.html）** –

http://stackoverflow.com/a/19427287 – mm759

@GuruprasadRao：對不起，我的壞languange，我使用你給出的例子的代碼。但我的問題是我不需要在頭上的第2行，我只需要在頭上的1行。這就是我的問題 – Wolfzmus

我測試過，它正在運行。也許你忘記添加一個<td></td>輸入代碼在這裏

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

來源

2016-11-15 07:39:07

我使用json數據。不是手動 – Wolfzmus

你需要把一個標題爲每一行，所以你的頭應該是這樣的：

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

來源

2016-11-15 07:40:37 cem

我的問題是我不需要更多的行上的標題。我如何做到這一點？：/ – Wolfzmus

這是一個古老的線程，但還是 - 我我想分享我在自己的項目中提出的內容。我基本上需要同樣的東西 - 我想跨越3列的標題，而不加強它，保持在一行。

您看到了錯誤，因爲jQuery DataTables需要爲每個字段分配一個處理程序或其他內容。我們可以通過添加具有儘可能多的標題列的另一個標題行來擺脫錯誤。在我的情況下，我添加了3個標題列。

現在，錯誤消失了，但標題看起來很可怕。看起來不必要，但將所有其他頂行標題列設置爲跨越2行（rowspan）。現在，「魔術」 - 作爲我們的第二行標題列不包含任何信息，只是隱藏它們！

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

瞧。這是我可以生產的最乾淨的解決方法，但它可以。

來源

2017-05-18 14:33:21

數據表列跨度頭

回答

相關問題