行の子を持つjQueryデータ型を使用してテーブルを構築する方法

Question

私はAjaxでjQueryデータテーブルを使用しています。 Laravelとサーバー形式でJSONを返します。

{ 
"draw":0, 
"recordsTotal":201 
,"recordsFiltered":201, 
"data":[{ 
"id":"1", 
"numsocio":"1", 
"identificacion":"9999999999", 
"nombre":"Anna, 
"apellidos":"Desclau", ........ etc 

そして、私はこの（3行サンプル）のようなテーブルを構築したい

私は

$(document).ready(function() { 
    $('#socios_datatable').DataTable({ 
     ajax: '{{ route('socios.datatable') }}', 
     columns: [ 
      { data: 'foto' }, 
      { data: 'nombre' }, 
      { ... }  
     ] 
    }); 
}); 

を使用しています

そして私はhttp://www.cscc.edu/_resources/app-data/datatables/examples/api/row_details.htmlの情報ポストでテストしてきましたが、動作させるためには得られません。 2つのサブローを持つ行を簡単に作成する方法は？ jQueryのデータ型は、複数の列を持つ1つの行には最適ですが、複雑な行に対しては難しいことがわかります。

誰でも助けてもらえますか？

Answer 1

追加情報の表示にはChild rowsを使用することを強くお勧めします。

残念ながら、ROWSPANとCOLSPANの属性は、jQuery DataTablesによってテーブル本体で正式にサポートされていません。

ただし、回避策があります。しかし、いくつかの制限があります。ほとんどのDataTables拡張機能を使用することはできず、検索/並べ替えは無効にして正しく動作するよう調整する必要があります。

ROWSPAN属性をRowsGroupプラグインを使用してエミュレートすることができます。詳しくは、jQuery DataTables: ROWSPAN in table body TBODYの記事を参照してください。

COLSPAN属性をエミュレートするには、非表示セルのトリックを使用できます。詳しくは、jQuery DataTables: COLSPAN in table body TBODYの記事を参照してください。

上記の両方の回避策を組み合わせると、同時にセルを縦横同時にグループ化することもできます。

例えば、データを使用して、シナリオのためのサンプルコードは、Ajaxを介して受信したが、次のようになります。

var table = $('#example').DataTable({ 
    'ajax': 'https://api.myjson.com/bins/pr6dp', 
    'columnDefs': [ 
     { 
     'targets': [1, 2, 3, 4, 5], 
     'orderable': false, 
     'searchable': false 
     } 
    ], 
    'rowsGroup': [0], 
    'createdRow': function(row, data, dataIndex){ 
     // Use empty value in the "Office" column 
     // as an indication that grouping with COLSPAN is needed 
     if(data[2] === ''){ 
     // Add COLSPAN attribute 
     $('td:eq(1)', row).attr('colspan', 5); 

     // Hide required number of columns 
     // next to the cell with COLSPAN attribute 
     $('td:eq(2)', row).css('display', 'none'); 
     $('td:eq(3)', row).css('display', 'none'); 
     $('td:eq(4)', row).css('display', 'none'); 
     $('td:eq(5)', row).css('display', 'none'); 
     } 
    }  
}); 

は、コードとデモのためthis exampleを参照してください。

詳しくはjQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPANの記事を参照してください。