[Datatable] rowspan is not working 동적 tr 생성 및 rowspan 적용하기.

데이터 테이블 만지면서 알게 된 사실인데, Data Table을 사용하면 rowspan과 같은 것은 자동으로 먹히지 않는다.

그로인해 문제점이 생기는데, 한개의 행을 클릭할 경우 펼쳤다가 접히는 구간이 필요한데, 해당 구간이 먹히지 않는 것이 문제였다.

 

그래서 기존에는 한개의 테이블을 더 만들었는데, 이제 방법을 찾았다.

<table id="arrTable" class="table table-bordered" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>idx</th>
            <th>title</th>
            <th>content</th>
            <th>status</th>
            <th>date</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $arrLength = $arr->list;
        if(isset($readyLength)) {
            for($i = 0; $i < count($arrLength); $i++) { 
        ?>
            <tr data-img="<?= $arrLength[$i]->img; ?>" data-idx="<?= $arrLength[$i]->idx; ?>">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        <?php
            }
        }
        ?>
    </tbody>
</table>

 

php가 최초에 뿌려지는 것은 기본 데이터를 뿌려주고, 해당 데이터를 접두사 "data-"로 작성하여 넣어준다.

해당 방식을 통해 구성을 하고

js단에서 아래와 같이 구성하면 완료.

let arrTable = $('#arrTable').DataTable({});

$('#arrTable tbody').on('click', 'tr', function () {
    let tr = $(this).closest('tr');
    let row = arrTable.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    } else {
        // Open this row
        row.child(readyRow(tr.data('img'), tr.data('idx'))).show();
        tr.addClass('shown');
    }
});

 

그러면 동적으로 해당 줄 아래에 1개의 행이 생겼다 사라질 것이다.

 

 tr에 해당 하는 class값을 적용하자. 안 그러면 답변으로 뜬 것에도 클릭이벤트가 생겨서 의도치 않는 버그가 발생.

 

참조 서류.

역시 document가 제일 좋다.

https://datatables.net/examples/api/row_details.html

DataTables example - Child rows (show extra / detailed information)