Possible bug when you use datatables row details in two different tables in same URL.

safiros

When you put in the same URL two tables with row details the plugin does not work correctly. It only works for the last table. The row details for the first table does not work. I leave you some code to show you what I am doing:

<script>
      
            var table = $('#thirdpartytable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                ajax: {
            url:  '{!! route('l.thirdparty') !!}',
            data: function (d) {
                d.id = {!! $result->id !!};
               
            }
        },

                
                createdRow: function( row, data, dataIndex ) {
        $( row ).find('td').attr('style', 'text-align:center;');
    },
                columns: [
                  {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
                  },
                    { data: 'demandado', name: 'demandado' },
                    { data: 'dni', name: 'dni' },
                    { data: 'address', name: 'address' },
                    { data: 'state', name: 'state' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],

                drawCallback: function(){
      var api = this.api(); 

      $('.editable', api.table().body())
         .editable({
          
        source: [
              {value: 0, text: 'Incluido'},
              {value: 1, text: 'Sin incluir'}
         
           ]
    })
         .off('hidden')
         .on('hidden', function(e, reason) {
            if(reason === 'save') {
               $(this).closest('td').attr('data-order', $(this).text());
               table.row($(this).closest('tr')).invalidate().draw(false);
            }
         });
   },
            });
            
       



    // Add event listener for opening and closing details
    $('#thirdpartytable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

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

    /* Formatting function for row details - modify as you need */
    function formate ( d ) {
        // `d` is the original data object for the row
        return '<table class="table">'+
            '<tr>'+
                '<td>Número de contacto de la otra parte:</td>'+
                '<td>'+d.contact_number+'</td>'+
                '</tr>'+
             '</table>';
    }
    </script>


    <script>
      
            var table = $('#documentstable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                ajax: {
            url:  '{!! route('l.documents') !!}',
            data: function (d) {
                d.id = {!! $result->id !!};
               
            }
        },

                
                createdRow: function( row, data, dataIndex ) {
        $( row ).find('td').attr('style', 'text-align:center;');
    },
                columns: [
                  {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
                  },

                    { data: 'file', name: 'file' },
                    { data: 'namedocu', name: 'namedocu' },
                    { data: 'created_at', name: 'created_at' },
                    {data: 'mergeColumn', name: 'mergeColumn', searchable: false, sortable : false},
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],

               
            });
            
       



    // Add event listener for opening and closing details
    $('#documentstable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

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

    /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the row
        return '<table class="table">'+
            '<tr>'+
                '<td>Notas:</td>'+
                '<td>'+d.description+'</td>'+
                '</tr>'+
            
            '</table>';
    }
    </script>

allan

Happy to take a look into it if you post a link to a test case showing the issue.

Thanks,
Allan