When you add the property "responsive: true" to "#reservations" and when you click on the child line - the table opens and closes. Help me please. When you press again, it gives an error
function format(d) { return '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="records" width="100%">' + '<thead>' + '<tr>' + '<th>Запись</th>' + '</tr>' + '</thead>' + '</table>'; } (function($){ $(document).ready(function() { var editor = new $.fn.dataTable.Editor( { ajax: 'inc/DataTablesEditor/php/table.useruserreservations.php', table: '#reservations', fields: [ { "label": "\u0411\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435:", "name": "reservation" } ] } ); var table = $('#reservations').DataTable( { ajax: 'inc/DataTablesEditor/php/table.useruserreservations.php', columns: [ { "data": "reservation", "class": "details-control" } ], select: true, lengthChange: false, pageLength: 6, responsive: true } ); $('#reservations tbody').on('click', 'td.details-control', function() { var tr = $(this).closest('tr'); var row = table.row(tr); if (row.child.isShown()) { row.child.hide(); tr.removeClass('shown'); } else { if ( table.row( '.shown' ).length ) { $('.details-control', table.row( '.shown' ).node()).click(); } var d = row.data(); row.child(format(d)).show(); tr.addClass('shown'); var editor2 = new $.fn.dataTable.Editor( { ajax: 'inc/DataTablesEditor/php/table.useruserrecords.php', table: '#records', fields: [ { "label": "\u0417\u0430\u043f\u0438\u0441\u044c:", "name": "record" } ] }); var table2 = $('#records').DataTable( { ajax: { url: 'inc/DataTablesEditor/php/table.useruserrecords.php', "type": "POST", "data": { "record_reservation": table.row( this ).id().replace(/[^-0-9]/gim,'') } }, columns: [ { "data": "record", "class": "details-control2" }, { "data": "record_user" } ], "columnDefs": [ { "targets": [ 1 ], "visible": false, "searchable": false } ], select: true, lengthChange: false, pageLength: 6, responsive: true }); } }); } ); }(jQuery)); 