title: Datatables select first row after first load and reload
body: <p>I'm using <a href="https://datatables.net/" rel="nofollow noreferrer">datatables</a> and I have to select the first row of table.
  The problem is select the first row when the table are reload (the table show the rooms of a building, so user can change the building).
  This is my code:</p>
  
  <pre><code>function showRoom(idBuilding){
  
      document.getElementById("roomTable").removeAttribute("style");
      if ( ! $.fn.DataTable.isDataTable( '#roomTable' ) ) {
          roomTable = $('#roomTable').DataTable({
              responsive:true,
              select: true,
              "autoWidth": false,
              "language": {
                  "emptyTable": "No room available!"
              },
              "ajax":{
                  "url": "/buildings/"+ idBuilding + "/rooms/",
                  "data": function ( d ) {
                      d.idRoomType = idRoomType;
                  },
                  "dataSrc": function ( json ) {
                      if (typeof json.success == 'undefined')
                          window.location.href = "/500";
                      else if (json.success){
                          return json.result.data;
                      }else{
                          notifyMessage(json.result, 'error');   
                          return "";
                      }                           
                  },  
                  "error": function (xhr, error, thrown) {
                      window.location.href = "/500";
                  }
              },
              "columns": [
                          { "data": "name" },
                          { "data": "capacity"},
                          {data:null, render: function ( data, type, row ) {
                              var string ="";
                              for (index = 0; index &lt; data.accessories.length; ++index){
                                  string = string + '&lt;i aria-hidden="true" class="'+ data.accessories[index].icon+'" data-toggle="tooltip" title="'+data.accessories[index].name+'"style="margin-right:7px;" &gt;&lt;/i&gt;';
                              }
                              return string;
                          }
                          },
                          ],
                          "fnInitComplete": function(oSettings, json) {
                              if (roomTable.rows().any()){
                                  roomTable.row(':eq(0)').select();
                                  selectedRoom(0);                        
                              }
                              initializeCalendar();
                          }
          });
      }   
      else {
          roomTable.ajax.url("/buildings/"+ idBuilding + "/rooms/?idRoomType=" + idRoomType).load(selectFirstRow());
      }
  
      roomTable.off('select')
      .on( 'select', function ( e, dt, type, indexes ) {
          selectedRoom(indexes);
      } );
      roomTable.off('deselect').on( 'deselect', function ( e, dt, type, indexes ) {
          reservationForm.room = -1;
          $('#calendar').fullCalendar('option', 'selectable', false);
          $("#calendar").fullCalendar("refetchEvents");
      } );
  }
  function selectFirstRow(){
      if (roomTable.rows().any()){
          roomTable.row(':eq(0)').select();
          selectedRoom(0);                        
      }
      initializeCalendar();
  }
  
  function selectedRoom(index){
      var room = roomTable.rows( index ).data().toArray()[0];
      reservationForm.room = room.idRoom;
      $('#calendar').fullCalendar('option', 'minTime', room.startTime);
      $('#calendar').fullCalendar('option', 'maxTime', room.endTime);
      $('#calendar').fullCalendar('option', 'selectable', true);
      $("#calendar").fullCalendar("refetchEvents");
  }
  </code></pre>
  
  <p>On the first load all work fine, but when      </p>
  
  <pre><code>roomTable.ajax.url("/buildings/"+ idBuilding + "/rooms/?idRoomType=" + idRoomType).load(selectFirstRow());
  </code></pre>
  
  <p>is called it seems to select the row before reload the table, so I have no row select (keep select the row of first load but now it is not visible).
  Do you have idea how can I select on the load after?</p>
  
  <p>UPDATE: the temporary solution is to use <code>destroy: true</code> but I would like a better solution like this:</p>
  
  <pre><code>if ( ! $.fn.DataTable.isDataTable( '#roomTable' ) ) {
          roomTable = $('#roomTable').DataTable({
              destroy: true, //it is useful because with standard code I have problem with first row selection, now it create the table each time
              responsive:true,
              select: true,
              "autoWidth": false,
              "language": {
                  "emptyTable": "No room available!"
              },
              "ajax":{
                  "url": "/buildings/"+ building.idBuilding + "/rooms/",
                  "data": function ( d ) {
                      d.idRoomType = idRoomType;
                  },
                  "dataSrc": function ( json ) {
                      if (typeof json.success == 'undefined')
                          window.location.href = "/500";
                      else if (json.success){
                          return json.result.data;
                      }else{
                          notifyMessage(json.result, 'error');   
                          return "";
                      }                           
                  },  
                  "error": function (xhr, error, thrown) {
                      window.location.href = "/500";
                  }
              },
              "fnDrawCallback": function(oSettings) {
                  if (roomTable.rows().any()){
                      roomTable.row(':eq(0)').select();
                      selectedRoom(0);                        
                  }
              },
              "fnInitComplete": function() {
                  initializeCalendar();
              },
              "columns": [
                          { "data": "name" },
                          { "data": "capacity"},
                          {data:null, render: function ( data, type, row ) {
                              var string ="";
                              for (index = 0; index &lt; data.accessories.length; ++index){
                                  string = string + '&lt;i aria-hidden="true" class="'+ data.accessories[index].icon+'" data-toggle="tooltip" title="'+data.accessories[index].name+'"style="margin-right:7px;" &gt;&lt;/i&gt;';
                              }
                              return string;
                          }
                          },
                          ],
          });
      }   
      else {
          roomTable.ajax.url("/buildings/"+ idBuilding + "/rooms/?idRoomType=" + idRoomType).load(selectFirstRow());
      }
  </code></pre>
  
  <p>But <code>fnDrawCallback</code> is called before ajax so I don't have the value, datatables keep on loading...</p>