Pass row data to row details

trusta77

I'm trying to do a row details in an auto data from JSON, but can't pass the data to show it in details. Since I use input form to change my data automatically, that's why i use clear() draw() to remove old data and put a new data whenever form is changed.

function detailData(){
                        var dt = $('#datatable').DataTable();
                        dt.clear().draw();
                        var id= $("#id").val();
                        var parameter= $("#parameter").val();

                        $.ajax({
                          url: 'ajax.php',
                          type: 'post',
                          data: {id:id, parameter:parameter},
                          dataType: 'json',
                          success: function(response){
                            console.log(response);
                            $.each(response,function(i,item){
                              dt.row.add([
                                '',
                                item.data1,
                                item.data2,
                                item.data3,
                                item.data4,
                                item.data5,
                                item.data6,
                                item.data7,
                                item.data8,
                                item.data9,
                                item.data10,
                                '',
                                '',
                                ''
                                ]).draw(false);
                              setDetails();
                            });
                            if (!$.trim(response)){   
                              t.clear().draw();
                            }                           
                          }
                        });                        
                      }

setDetails() is supposed to call function setDetails and set row details. but i don't know how to pass the data from response

function setDetails(){
                          $('#datatable tbody').on( 'click', 'tr td.details-control', 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') );
                          }
                        }
                        });
}

Just in case, this is my installation:

$(document).ready( function () {
                          $.fn.dataTable.moment('DD/MM/YYYY');
                          var dt = $('#datatable').DataTable({
                            responsive: true,
                            "order": [[ 0, "asc" ]],
                            "lengthMenu": [50, 25, 10],
                            "columnDefs": [
                            {
                              "class":"details-control",
                              "orderable":false,
                              "data":null,
                              "defaultContent": "",
                              "targets": 0
                            }
                            ]
                          });
} );

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin