Unable to Draw Child/Nested DataTable on Click Button

rajrathodbvn

I am creating dynamic child/nested datatable like below

$( document ).ready(function() {
var oInnerTable;
...........

$('.table_rotators tbody').on('click', 'td.details', function () {
                var tr = $(this).closest('tr');
                var row = table.row( tr );
                var rotator_id = $(this).attr('data-url');
                console.log(rotator_id);
                if ( row.child.isShown() ) {
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    row.child(format(rotator_id)).show();
                    oInnerTable = $("#url_table_" + rotator_id).dataTable({
                         "processing": true,
                         "serverSide": true,
                         "ajax":{
                            url :"actions/data_url_response.php",
                            type: "post",
                            data: function ( d ) {
                                d.rotator_id = rotator_id;
                            }
                          },
                          autoWidth: false,
                          columnDefs: [
                            { 
                                "targets":[0, 6],
                                "orderable":false,
                            },
                            {
                                targets: 0,
                                render: function (data, type, row) {
                                    return '<div class="form-check"><input type="checkbox" class="form-check-input position-static select_ids" value="'+row[0]+'"></div>';
                                }
                            }
                         ],
                            dom: '<"datatable-scroll"t><"datatable-footer"ip>',
                            language: {
                                search: '<span>Filter:</span> _INPUT_',
                                searchPlaceholder: 'Type to search...',
                                lengthMenu: '<span>Show:</span> _MENU_',
                                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                            }
                    });
                    
                    tr.addClass('shown');
                }
            });

    function format (d) {
               var table ='<div class="card border">' + 
                '<div class="card-header bg-transparent header-elements-inline">' + 
                '   <form class="form-inline">  ' + 
                '       <div class="form-group-feedback form-group-feedback-right">' + 
                '           <input type="search" id="searchByName" data-id="'+d+'" class="form-control wmin-200 url_search" placeholder="Search...">' + 
                '           <div class="form-control-feedback">' + 
                '               <i class="icon-search4 font-size-base text-muted"></i>' + 
                '           </div>' + 
                '       </div>' + 
                '       ' + 
                '       <div class="form-group ml-3">' + 
                '         ' + 
                '         <select class="form-control wmin-200 url_status" name="url_status" data-id="'+d+'" data-width="100%">' + 
                '                   ' + 
                '         <option value="-1">Active URLs</option>' + 
                '         <option value="-1">Paused URLs</option>' + 
                '         <option value="-1">Archived URLs</option>' + 
                '               ' + 
                '        </select>' + 
                '        ' + 
                '        ' + 
                '       </div>' + 
                '   ' + 
                '   </form>' + 
                '   <div class="header-elements">' + 
                '       ' + 
                '    <form class="form-inline">  ' + 
                '        ' + 
                '       <div class="form-group mr-3">' + 
                '               ' + 
                '           <button type="button" data-id="'+d+'" class="btn btn-indigo url_add">' + 
                '                   ADD URL' + 
                '                       ' + 
                '           </button>' + 
                '       </div>' + 
                '' + 
                '   <div class="form-group ">' + 
                '       <button type="button" data-id="'+d+'" class="btn btn-indigo url_refresh">' + 
                '                       REFRESH' + 
                '                       ' + 
                '       </button>' + 
                '   </div>' + 
                '' + 
                '   </form>' + 
                '       ' + 
                '   </div>' + 
                '</div>' + 
                '' + 
                '   <table class="table table-hover" id="url_table_'+d+'">' + 
                '       <thead>' + 
                '           <tr>' +
                '<th data-orderable="false"><div class="form-check"><input type="checkbox" class="form-check-input position-static" id="selectAll"></div></th>'+
                '               <th>URL Name</th>' + 
                '               <th>TC</th>' + 
                '               <th>UC</th>' + 
                '               <th>DC</th>' + 
                '               <th>FC</th>' + 
                 '              <th>Status</th>' + 
                '           </tr>' + 
                '       </thead>' + 
                '   </table>' + 
                '</div>' + 
                '';
                
                return table;
            }


});

Its all working fine but Now I am looking for refresh table data on click button, I am trying to refresh table like below on button click but its giving me error called
Uncaught TypeError: oInnerTable.draw is not a function
My button click code for refresh table is like this

$(document).on('click','.url_refresh',function(){ oInnerTable.draw(); });

I think its variable related issue but I am not understanding or getting idea how to use it properly so I can achieve my goal.

Thanks!

allan

oInnerTable = $("#url_table_" + rotator_id).dataTable({

See the top FAQ

You need to use:

oInnerTable = $("#url_table_" + rotator_id).DataTable({

Allan