Hi Allan and friends.

The below code works fine for the first time when the data is loaded but it stops showing the child row when new data is loaded to the datatable after destroy=true.
Any tips or clue

 <script>

        function format(d) {
            
        return '<a href=http://xxxx/getContent?id=current&vsId=%7b' + d.Ver + '%7d target="_blank">View Document</a>' 

}
 
    function getproject() {
      //  alert($("input[name=Version]:checked").val());
        $(document).ready(function () {
            alert("Test");
            var dt = $('#example').DataTable({
                "bDestroy": true,
                
                "ajax": "../task.asmx/get_json?pno=" + $("#Text1").val() + "&Ver=" + $("input[name=Version]:checked").val(),
                "sDom": 'T<"clear">lfrtip',
                "oTableTools": {
                    "sSwfPath": "http://xxx/media/swf/copy_csv_xls_pdf.swf",
                    "aButtons": [{
                        "sExtends": "collection",
                        "sButtonText": "Save",
                        "aButtons": ["csv", "xls", "pdf"]
                    }]
                },
               // "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "columns": [
                    {
                        "class": "details-control",
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },
                    { "data": "DocumentNumber" },
                    { "data": "TypeName" },
                    { "data": "Major" }
                ],
                "order": [[1, 'asc']]
            });

            // Array to track the ids of the details displayed rows
            var detailRows = [];
            //detailRows.length = 0;
            $('#example tbody').on('click', 'tr td:first-child', function () {
                
                var tr = $(this).closest('tr');
                
                var row = dt.row(tr);
                
                var idx = $.inArray(tr.attr('id'), detailRows);

                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();
                    
                    // Add to the 'open' array
                    if (idx === -1) {
                        detailRows.push(tr.attr('id'));
                    }
                }
            });

            // On each draw, loop over the `detailRows` array and show any child rows
            dt.on('draw', function () {
                $.each(detailRows, function (i, id) {
                    $('#' + id + ' td:first-child').trigger('click');
                });
            });
        });
    }
    </script>

     <input id="Hidden1" type="hidden" value=""/>
       Project Number:  <input id="Text1" type="text" />
         <input id="Submit1" type="submit" value="submit" onclick="getproject()" />&nbsp;&nbsp;&nbsp;Versions&nbsp;
    
    <input type="radio" name="Version" value="1">Current
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="Version" value="0" checked="checked">All
       <table id="example" class="display" cellspacing="0" width="100%">

      <thead>
      <tr>
      <th></th>
      <th>DocumentNumber</th>
      <th>TypeName</th>
      <th>Major</th>
      </tr>
      </thead>
     <tfoot>
      <tr>
      <th></th> 
      <th>DocumentNumber</th>
      <th>TypeName</th>
      <th>Major</th>
      </tr>
      </tfoot>

  </table>