У меня есть страница с основной таблицей данных, и в строке щелчка я хочу нарисовать дочерний элемент со стороны сервера с данными.
Код 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();
});
В первый раз я ничего не вижу, а во второй раз получаю сообщение об ошибке:
Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.





Я решил это, под кодом, если его можно использовать
$('#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'));
}
}
});