Вложенный дочерний объект DataTables с другой стороной сервера DataTables

Question

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

Код DataTable является правильным, потому что я использую его в отдельном режиме, он работает.

Это моя функция, вызываемая по двойному щелчку мастера строк

function Details(data, tr) {

        var _url = App.getGlobalWcfErgonPath() + "GetDtPianoDiCaricoDetail"
        var _data = JSON.stringify({ pCdDeposito: "001", pDtConsegna: "2018-12-27T16:32:38+01:00", pCdGiro: data.CdGiro });

        $('#tablePianodicaricoDetail').DataTable({
            'dom': "frtip",
            'serverSide': true,
            'ajax': {
                'type': "POST",
                'data': { "StringSearch": _data },
                'url': _url,
                'contentType': "application/json; charset=utf-8",
                'dataType': "jsonp",
                'dataSrc': function (result) {
                    var parseJson = $.parseJSON(result.Data);
                    var json = {}
                    json.draw = 1;
                    json.recordsTotal = parseJson.length;
                    json.recordsFiltered = parseJson.length;
                    json.data = result.Data;

                    return parseJson;
                }
            },
            'scrollY': '50vh',
            'scrollCollapse': true,
            'searching': false,
            'info': false,
            'paging': false,
            'language': { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json" },
            'destroy': true,
            'columns': [
                { data: "CdCli", title: "Cliente", className: "dt-center", visible: true },
                { data: "RagioneSociale", title: "Ragione Sociale", className: "dt-left progress", visible: true },
                { data: "GV", title: "GV", className: "dt-right", visible: true, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); }, },
                { data: "OF", title: "OF", className: "dt-right", visible: true, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); }, },
                { data: "SG", title: "SG", className: "dt-right", visible: true, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); }, },
                { data: "PF", title: "PF", className: "dt-right", visible: true, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); }, },
                { data: "CR", title: "CR", className: "dt-right", visible: true, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); }, },
                { data: "SL", title: "SL", className: "dt-right", visible: true, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); }, },
                { data: "TotaleKg", title: "Tot. KG.", className: "dt-right", visible: true },
                { data: "Im", title: "Importo", className: "dt-right", visible: true },

        });


        if (tr.child.isShown()) {
            // This row is already open - close it
            tr.child.hide();
            $(tr).removeClass('shown');
        }
        else {
            // Open this row


            //tr.child(div).show();

            $('#tablePianodicaricoDetail').on('draw.dt', function () {
                    tr.child($('#tablePianodicaricoDetail').html()).show();
            });

            $(tr).addClass('shown');               
        }
    }

В этом режиме код работает, но не очень хорошо.На ребёнке я теряю голову стола.

Если я изменяю событие draw.dt, как показано ниже

$('#tablePianodicaricoDetail').on('draw.dt', function () {
   tr.child($('#tablePianodicaricoDetail').DataTable().table().container()).show();
});

В первый раз, когда я ничего не вижу, и во второй раз, когда я получаюошибка:

Не удалось выполнить «insertBefore» для «узла»: узел, перед которым должен быть вставлен новый узел, не является дочерним по отношению к этому узлу.

Answer 1

Я решил, ниже код, если это можно использовать

    $('#tablePianodicaricoMaster tbody').on('dblclick', 'tr', function () {
        var tr = $(this).closest('tr');
        var row = $('#tablePianodicaricoMaster').DataTable().row(tr);
        var idx = $.inArray(tr.attr('id'), detailRows);
        var rowData = row.data();
        var _url = App.getGlobalWcfErgonPath() + "GetDtPianoDiCaricoDetail";
        var _data = JSON.stringify({ pCdDeposito: $("#pCdDeposito").val(), pDtConsegna: moment($('#pDtConsegna').closest('div.date-picker').datepicker('getDate')).format(), pCdGiro: rowData.CdGiro });

        if (row.child.isShown()) {
            tr.removeClass('details');
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice(idx, 1);
        }
        else {
            tr.addClass('details');
            //row.child(format(row.data())).show();
            row.child("<table class='table table-bordered table-hover' cellspacing='0'  id='tablePianodicaricoDetail" + rowData.CdGiro +
                "' style='padding-left:50px;'><tbody></tbody></table>").show();

            var detailsTableOpt = $('#tablePianodicaricoDetail' + rowData.CdGiro).dataTable({
                'dom': 'Bfrtip',
                //'data': [],
                'serverSide': true,
                'processing': true,
                'ajax': {
                    type: "POST",
                    data: { "StringSearch": _data },
                    url: _url,
                    contentType: "application/json; charset=utf-8",
                    dataType: "jsonp",
                    dataSrc: function (result) {
                        var parseJson = $.parseJSON(result.Data);
                        var json = {}
                        json.draw = 1;
                        json.recordsTotal = parseJson.length;
                        json.recordsFiltered = parseJson.length;
                        json.data = result.Data;

                        return parseJson;
                    }
                },
                'scrollY': '50vh',
                'scrollCollapse': true,
                'searching': false,
                'info': false,
                'paging': false,
                'language': { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json" },
                'destroy': true,
                'order': [],
                'buttons': [
                    {
                        text: '<i class="fa fa-print" aria-hidden="true"></i>',
                        titleAttr: 'Stampa',
                        action: function (e, dt, node, config) {
                            return printDetails(e, dt, node, config);
                        }
                    },
                    {
                        extend: 'copyHtml5',
                        text: '<i class="fa fa-files-o"></i>',
                        titleAttr: 'Copia',
                    },
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fa fa-file-excel-o"></i>',
                        titleAttr: 'Excel',
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fa fa-file-pdf-o"></i>',
                        titleAttr: 'PDF',
                    }
                ],
                'columns': [
                    { data: "CdCli", title: "Cliente", className: "dt-center", visible: true, orderable: false },
                    { data: "RagioneSociale", title: "Ragione Sociale", className: "dt-left progress", visible: true, orderable: false },
                    { data: "GV", title: "GV", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "OF", title: "OF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "SG", title: "SG", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "PF", title: "PF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "CR", title: "CR", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "SL", title: "SL", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                    { data: "TotaleKg", title: "Tot. KG.", className: "dt-right", visible: true, orderable: false },
                    { data: "Im", title: "Importo", className: "dt-right", visible: true, orderable: false },
                ],
            });
            // Add to the 'open' array
            if (idx === -1) {
                detailRows.push(tr.attr('id'));
            }
        }
    });