title: oInnerTable is not defined
body: <p>I am creating nested datatable like below, its working fine for all functions</p>
  <pre><code>$( 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 = $(&quot;#url_table_&quot; + rotator_id).dataTable({
                           &quot;processing&quot;: true,
                           &quot;serverSide&quot;: true,
                            rowReorder: true,
                           &quot;ajax&quot;:{
                              url :&quot;actions/data_url_response.php&quot;,
                              type: &quot;post&quot;,
                              data: function ( d ) {
                                  d.rotator_id = rotator_id;
                              }
                            },
                            autoWidth: false,
                            columnDefs: [
                              { 
                                  &quot;targets&quot;:[0, 6],
                                  &quot;orderable&quot;:false,
                              },
                              {
                                  targets: 0,
                                  render: function (data, type, row) {
                                      return '&lt;div class=&quot;form-check&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;form-check-input position-static select_ids&quot; value=&quot;'+row[0]+'&quot;&gt;&lt;/div&gt;';
                                  }
                              }
                           ],
                              dom: '&lt;&quot;datatable-scroll&quot;t&gt;&lt;&quot;datatable-footer&quot;ip&gt;',
                              language: {
                                  search: '&lt;span&gt;Filter:&lt;/span&gt; _INPUT_',
                                  searchPlaceholder: 'Type to search...',
                                  lengthMenu: '&lt;span&gt;Show:&lt;/span&gt; _MENU_',
                                  paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&amp;larr;' : '&amp;rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&amp;rarr;' : '&amp;larr;' }
                              }
                      });
                      
                      tr.addClass('shown');
                  }
              });
  
      function format (d) {
                 var table ='&lt;div class=&quot;card border&quot;&gt;' + 
                  '&lt;div class=&quot;card-header bg-transparent header-elements-inline&quot;&gt;' + 
                  '   &lt;form class=&quot;form-inline&quot;&gt;  ' + 
                  '       &lt;div class=&quot;form-group-feedback form-group-feedback-right&quot;&gt;' + 
                  '           &lt;input type=&quot;search&quot; id=&quot;searchByName&quot; data-id=&quot;'+d+'&quot; class=&quot;form-control wmin-200 url_search&quot; placeholder=&quot;Search...&quot;&gt;' + 
                  '           &lt;div class=&quot;form-control-feedback&quot;&gt;' + 
                  '               &lt;i class=&quot;icon-search4 font-size-base text-muted&quot;&gt;&lt;/i&gt;' + 
                  '           &lt;/div&gt;' + 
                  '       &lt;/div&gt;' + 
                  '       ' + 
                  '       &lt;div class=&quot;form-group ml-3&quot;&gt;' + 
                  '         ' + 
                  '         &lt;select class=&quot;form-control wmin-200 url_status&quot; name=&quot;url_status&quot; data-id=&quot;'+d+'&quot; data-width=&quot;100%&quot;&gt;' + 
                  '                   ' + 
                  '         &lt;option value=&quot;-1&quot;&gt;Active URLs&lt;/option&gt;' + 
                  '         &lt;option value=&quot;-1&quot;&gt;Paused URLs&lt;/option&gt;' + 
                  '         &lt;option value=&quot;-1&quot;&gt;Archived URLs&lt;/option&gt;' + 
                  '               ' + 
                  '        &lt;/select&gt;' + 
                  '        ' + 
                  '        ' + 
                  '       &lt;/div&gt;' + 
                  '   ' + 
                  '   &lt;/form&gt;' + 
                  '   &lt;div class=&quot;header-elements&quot;&gt;' + 
                  '       ' + 
                  '    &lt;form class=&quot;form-inline&quot;&gt;  ' + 
                  '        ' + 
                  '       &lt;div class=&quot;form-group mr-3&quot;&gt;' + 
                  '               ' + 
                  '           &lt;button type=&quot;button&quot; data-id=&quot;'+d+'&quot; class=&quot;btn btn-indigo url_add&quot;&gt;' + 
                  '                   ADD URL' + 
                  '                       ' + 
                  '           &lt;/button&gt;' + 
                  '       &lt;/div&gt;' + 
                  '' + 
                  '   &lt;div class=&quot;form-group &quot;&gt;' + 
                  '       &lt;button type=&quot;button&quot; data-id=&quot;'+d+'&quot; class=&quot;btn btn-indigo url_refresh&quot;&gt;' + 
                  '                       REFRESH' + 
                  '                       ' + 
                  '       &lt;/button&gt;' + 
                  '   &lt;/div&gt;' + 
                  '' + 
                  '   &lt;/form&gt;' + 
                  '       ' + 
                  '   &lt;/div&gt;' + 
                  '&lt;/div&gt;' + 
                  '' + 
                  '   &lt;table class=&quot;table table-hover&quot; id=&quot;url_table_'+d+'&quot;&gt;' + 
                  '       &lt;thead&gt;' + 
                  '           &lt;tr&gt;' +
                  '&lt;th data-orderable=&quot;false&quot;&gt;&lt;div class=&quot;form-check&quot;&gt;&lt;input type=&quot;checkbox&quot; class=&quot;form-check-input position-static&quot; id=&quot;selectAll&quot;&gt;&lt;/div&gt;&lt;/th&gt;'+
                  '               &lt;th&gt;URL Name&lt;/th&gt;' + 
                  '               &lt;th&gt;TC&lt;/th&gt;' + 
                  '               &lt;th&gt;UC&lt;/th&gt;' + 
                  '               &lt;th&gt;DC&lt;/th&gt;' + 
                  '               &lt;th&gt;FC&lt;/th&gt;' + 
                   '              &lt;th&gt;Status&lt;/th&gt;' + 
                  '           &lt;/tr&gt;' + 
                  '       &lt;/thead&gt;' + 
                  '   &lt;/table&gt;' + 
                  '&lt;/div&gt;' + 
                  '';
                  
                  return table;
              }
  
  
  });
  </code></pre>
  <p>But rowreorder function not working for it. I am following example from
  <a href="https://datatables.net/extensions/rowreorder/examples/initialisation/events.html" rel="nofollow noreferrer">https://datatables.net/extensions/rowreorder/examples/initialisation/events.html</a></p>
  <p>So I have added event code like below</p>
  <pre><code>oInnerTable.on( 'row-reorder', function ( e, diff, edit ) {
          var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'&lt;br&gt;';
   
          for ( var i=0, ien=diff.length ; i&lt;ien ; i++ ) {
              var rowData = table.row( diff[i].node ).data();
   
              result += rowData[1]+' updated to be in position '+
                  diff[i].newData+' (was '+diff[i].oldData+')&lt;br&gt;';
          }
   
          $('#result').html( 'Event result:&lt;br&gt;'+result );
      } );
  </code></pre>
  <p>But On document Load, Its giving error like
  oInnerTable is not defined, I am not getting idea how I can add event with my table which is getting generated after document load, I think there some jquery tricks, I am missing, Let me know if anyone can help me for same.</p>