DataTablesテーブルに​​の2行をネストする方法はありますか？

Question

ここに、私がアーカイブしたい構造体と、DataTablesプラグインを組み合わせました。あなたはそれが3列を取ってアドレスを見ることができるように

。

以下のhtml を壊すデータ型のソート機能。そしてテーブルはシフトして見える。

異なるデータの例ですが、同じ考え方です。

<tr> 
    <td colspan="3"> 
    <table cellpadding="0" cellspacing="0"> 
     <tr> 
      <td >Some very long lorem ipsum text</td> 
     </tr> 
     <tr> 
      <td>Angelica Raaaaamos</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 
     </tr> 
    </table> 
    </td> 

    <td>33</td> 
    <td>2008/11/28</td> 
    <td>$162,700</td> 
</tr> 

UPD

灰色のテキストは基ではありません。テーブル内のすべての項目（すべての行）は は、それが

Answer 1

拡張子RowGroupを使用すると、指定したデータポイントで行をグループ化できます。

RowGroup

表のグループ行の能力を迅速にエンドユーザに聞かせて、容易に示されるデータの構造を参照し、各グループに示したデータの要約でそれらを提示することができます。RowGroupはこの機能をDataTableに追加し、DataTableに表示される開始グループと終了グループの行をカスタマイズし、サマリーデータを統合してサイトに完全に収まるようにします。オブジェクトとしてrowGroupオプションを使用

、あなたに行グループを探して、ソースデータを定義するためのオプションのカップルを使用する能力を提供します。使用可能なすべてのオプションについては、hereをご覧ください。

ここでは例を示します;）

var dataSet = [ 
 
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800", "Foo foo foo foo bla bla" ], 
 
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750", "Some very long lorem ipsum text" ], 
 
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000", "Bar bar bar bar bla bla" ], 
 
] 
 

 
$('#example').DataTable({ 
 

 
    data: dataSet, 
 
    columns: [ 
 
    { title: "Name" }, 
 
    { title: "Position" }, 
 
    { title: "Office" }, 
 
    { title: "Extn." }, 
 
    { title: "Start date" }, 
 
    { title: "Salary" }, 
 
    ], 
 
    rowGroup: { 
 
    startRender: function(row, group) { 
 
     if(typeof group == "string") { 
 
     return $('<tr/>') 
 
      .append('<td colspan="6"><span>' + group + '</span></td>'); 
 
     } 
 
    }, 
 
    endRender: null, 
 
    className: 'table-group', 
 
    dataSrc: 6 
 
    } 
 

 
});

table.dataTable tbody th, table.dataTable tbody .table-group td { 
 
    padding: 0; 
 
} 
 

 
table.dataTable tbody th, table.dataTable tbody .table-group td span { 
 
    padding: 8px 10px; 
 
    display: block; 
 
    color: silver; 
 
} 
 

 
table.dataTable tbody tr:nth-child(4n), 
 
table.dataTable tbody tr:nth-child(4n-1) { 
 
    background-color: #eee; 
 
}

<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"/> 
 
<link href="https://cdn.datatables.net/rowgroup/1.0.0/css/rowGroup.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/rowgroup/1.0.0/js/dataTables.rowGroup.min.js"></script> 
 

 
<table id="example" class="" cellspacing="0" width="100%"></table>

Answer 2

が2つの余分な空白のTDを使用含まれている必要があります。 のような：

<tr> 
    <td >Some very long lorem ipsum text</td> 
    <td></td> 
    <td></td> 
</tr> 

それが動作しない場合は、スタイリングの幅を使用します。以下のような：

<tr > 
     <td style="width:50px">Some very long lorem ipsum text</td> 
     <td></td> 
     <td></td> 
    </tr> 
     <tr > 
     <td style="width:50px">Some</td> 
     <td>Acountant</td> 
     <td>london</td> 
    </tr> 

Answer 3

私は単純にコメントでこれを入れているだろうが、私の評判が低すぎるので、私はあなたがあなたの<td>を追加する必要がdrawCallbackでthis

を見てみることをお勧めします行の前にあなたはそれがになりたい

私は

Answer 4

をあなたのjQueryのコードを持っていた場合は、ここからアイデアを得ることができ、より具体的な可能性があり：
は隠そうとするあなたのtd

$(function(){ 
 
\t $('#id-table').DataTable(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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='id-table' border='1'> 
 
<thead> 
 
<tr> 
 
    <th>Angelica Raaaaamos</th> 
 
    <th>Accountant</th> 
 
    <th>Tokyo</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td colspan="3">Some very long lorem ipsum text</td> 
 
    <td style='display:none;'></td> 
 
    <td style='display:none;'></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Angelica Raaaaamos</td> 
 
    <td>Accountant</td> 
 
    <td>Tokyo</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

この結果<td style='display:none;'></td>として（逆行）あなたが得るは、DataTableのは最初の列でソートされ、bcozある
することはできCHANGEそれを。