Как создать подстроку "детали", к выборочным строкам уже нарисованной таблицы в Datatables?

Question

Имеется уже нарисованная таблица(не полученная через ajax), в ней есть строки которые должны отображать более детальную информацию. Никак не могу понять логику, как прикрутить функционал details к уже существующей таблице и например к выбранным классам строк.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.css" />     <script src="https://code.jquery.com/jquery-3.7.1.js"></script>      
    <script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>   
    <title>Document</title>
</head>
<body>
    <table id="tbl">
        <thead>
            <tr>
                <th>№</th>
                <th>Фамилия</th>
                <th>Имя</th>
                <th>Отчество</th>
                <th>Пол</th>
                <th>Дата рождения</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Иванов</td>
                <td>Иван</td>
                <td>Михайлович</td>
                <td>М</td>
                <td>22.03.1981</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Васильев</td>
                <td>Пётр</td>
                <td>Яковлевич</td>
                <td>М</td>
                <td>01.02.1934</td>
            </tr>
            <tr class="details" id="row-1">
                <td colspan="6">
                    Ветеран труда!
                </td>
            </tr> 
            <tr>
                <td>3</td>
                <td>Петров</td>
                <td>Владимир</td>
                <td>Васильевич</td>
                <td>М</td>
                <td>04.03.1988</td>
            </tr>
        </tbody>
    </table>
    <script>        
  
        const table = new DataTable('#tbl', {                       
            order: [[0, 'asc']],
            processing: true,                    
            paging: true,
            searching: true
            
        });
        
        
        // Array to track the ids of the details displayed rows
        const detailRows = [];
        
        table.on('click', 'tbody td.dt-control', function () {
            let tr = event.target.closest('tr');
            let row = table.row(tr);
            let idx = detailRows.indexOf(tr.id);            
            if (row.child.isShown()) {
                tr.classList.remove('details');
                row.child.hide();
        
                // Remove from the 'open' array
                detailRows.splice(idx, 1);
            }
            else {
                tr.classList.add('details');
                row.child(format(row.data())).show();
        
                // Add to the 'open' array
                if (idx === -1) {
                    detailRows.push(tr.id);
                }
            }
        });
    </script>
</body>
</html>

БЛОГ НА HUSL

Как создать подстроку "детали", к выборочным строкам уже нарисованной таблицы в Datatables?

Ответы (0 шт):