Datatables 1.10 반응식 검색은 하위 행을 표시하도록 확장합니다.

Question

열 제어 하위 행과 함께 반응 형 확장을 사용하여 Datatables 1.10을 사용하고 있습니다. https://datatables.net/extensions/responsive/examples/child-rows/column-control.html

일치하는 하위 행이 확장/표시되도록 검색을 구성하려면 어떻게해야합니까?

예를 들어이 페이지에서 "5407"을 검색하면 테이블이 필터링되어 부모 행을 표시하지만 일치 항목은 하위 행에서만 발견됩니다. 일치하는 하위 행을 표시하도록 검색 결과를 확장하려면 어떻게해야합니까?

https://jsfiddle.net/lbriquet/Ldgutob0/

$(document).ready(function() { 
    $('#example').DataTable({ 
    responsive: { 
     details: { 
     type: 'column' 
     } 
    }, 
    columnDefs: [{ 
     className: 'control', 
     orderable: false, 
     targets: 0 
    }], 
    order: [1, 'asc'] 
    }); 
}); 

Answer 1

당신은 자동으로 search.dt 핸들러에서 검색 후 모든 하위 행을 열 수 있습니다

$('#example').on('search.dt', function() { 
    table 
    .rows({ filter: "applied" }) 
    .every(function(rowIdx, tableLoop, rowLoop) { 
    $('td:first-child', this.node()).trigger('click.dtr'); 
    }) 
}) 

업데이트 바이올린 ->https://jsfiddle.net/Ldgutob0/2/ 필터/검색 모두 처리 될 때마다 표시 행은 자식 행을 열 것입니다. 코드를 조사하여 .dtr 접미사를 발견했는데, "dataTables responsive"의 약자라고 생각하는 네임 스페이스 일 뿐이므로 실수로 클릭하지 않는 사용자 정의 클릭 핸들러가 있는지 알 수 있습니다. trigger().

필터링 된 값이 숨겨진 열 또는 보이는 열에 실제로 있는지 여부와 관계없이 모든 하위 행이 열립니다.