행 자식이있는 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 데이터 테이블은 여러 열이있는 하나의 행에 완벽하지만 더 복잡한 행은 어렵다는 것을 알았다.

아무도 도와 줄 수 있습니까?

Answer 1

추가 정보를 표시하려면 Child rows을 사용하는 것이 좋습니다.

불행하게도 ROWSPAN 및 COLSPAN 속성은 jQuery DataTables에 의해 테이블 ​​본문에서 공식적으로 지원되지 않습니다.

그러나 해결 방법이 있습니다. 그러나 몇 가지 제한 사항이 있습니다. 대부분의 DataTables 확장을 사용할 수 없으며 검색/정렬을 비활성화하고 올바르게 작동하도록 조정해야합니다.

RowsGroup 플러그인을 사용하여 ROWSPAN 속성을 에뮬레이트 할 수 있습니다. 자세한 내용은 jQuery DataTables: ROWSPAN in table body TBODY 문서를 참조하십시오.

숨겨진 셀이있는 트릭을 사용하여 COLSPAN 속성을 에뮬레이트 할 수 있습니다. 자세한 내용은 jQuery DataTables: COLSPAN in table body TBODY 문서를 참조하십시오.

위에서 설명한 두 가지 해결 방법을 모두 결합하면 동시에 세로 및 가로로 셀을 그룹화 할 수 있습니다.

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를 참조하십시오처럼

예를 들어, Ajax를 통해 수신 된 데이터와 시나리오에 대한 샘플 코드를 볼 수 있었다.

자세한 내용은 jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN 문서를 참조하십시오.