Child rows opening and closing

pblair

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>

pblair

No comments- Is the code difficult to read

pblair

hello

allan

Rather than destroying the table, I would strongly recommend using ajax.url() to change the URL and reload the table.

If you must destroy the table, I would suggest that you need to unbind any previously bound event handlers before doing so.

Is the code difficult to read

How to format the code is shown at the bottom of the input text box for the comments. It is Markdown formatted.

That and it isn't possible for me to respond to every single free support request (with over 40 of them per day), which is why some are unfortunately unanswered.

Allan