Datatables rowchild в сгенерированную таблицу

Question

У меня есть приложение angular для получения полей из базы данных и создания таблицы с ним. Я использую таблицы данных в этой сгенерированной таблице, потому что мне нужны кнопки и записи сортировки и страниц на каждой странице.

Я хотел бы добавить рядного ребенка со скрытыми значениями, такими как this Это мой индекс. html:

                <table class="table table-bordered table-hover" id="table">
                    <thead class="thead-dark">
                        <tr>
                            <th></th>
                            <th><h4>Name</h4></th>
                            <th><h4>Price</h4></th>
                            <th><h4>Qt</h4></th>
                            <th class="d-none"><h4>Picture1</h4></th>
                            <th class="d-none"><h4>Picture2</h4></th>
                            <th class="d-none"><h4>Picture3</h4></th>
                        </tr>
                    </thead>
                    <tbody class="bg-light">
                        <tr class="gradeU" ng-repeat="x in fruits">
                            <td class="details-control"></td>
                            <th class="name">{{ x.name }}</th>
                            <td>{{ x.price}}€</td>
                            <td>{{ x.qt}}</td>
                            <td class="d-none p1">{{x.pic1}}</td>
                            <td class="d-none p2">{{x.pic2}}</td>
                            <td class="d-none p3">{{x.pic3}}</td>
                        </tr>
                    </tbody>
                </table>
                <style>
                    td.details-control {
                        background: url('http://datatables.net/examples/resources/details_open.png') no-repeat center center;
                        cursor: pointer;
                    }
                    tr.shown td.details-control {
                        background: url('http://datatables.net/examples/resources/details_close.png')
                        no-repeat center center;
                    }
                </style>

Это мое приложение. js:

var app = angular.module('myApp', []);
// fruit list
app.controller('fruitController', function($scope, $http) {
    $http.get("db.php").then(function (response) {
        $scope.fruits = response.data.fruits;
    });
});
// table
$(document).ready( function () {
    $('#table').DataTable();
} );

Сейчас у меня есть таблица со скрытым содержимым, чтобы показать ее на дочернем элементе, но я не могу найти способ сделать это для сгенерированной таблицы.

Я хочу показать скрытое содержимое дочерней строки при нажатии td.details-control.

Answer 1

Обновите функцию $(document).ready(), как показано ниже:

$(document).ready( function () {

    var table = $('#table').DataTable();

    $('#table').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
        } 
        else {              
            row.child("content for child row").show();              
        }
    });      
});