Datatables wählen erste Zeile nach dem ersten Laden und neu laden

Question

Ich verwende datatables und ich muss die erste Zeile der Tabelle auswählen. Das Problem ist die erste Zeile auszuwählen, wenn die Tabelle neu geladen wird (die Tabelle zeigt die Räume eines Gebäudes, so dass der Benutzer das Gebäude ändern kann). Dies ist mein 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 < data.accessories.length; ++index){ 
           string = string + '<i aria-hidden="true" class="'+ data.accessories[index].icon+'" data-toggle="tooltip" title="'+data.accessories[index].name+'"style="margin-right:7px;" ></i>'; 
          } 
          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"); 
} 

Auf der ersten Last arbeiten alle in Ordnung, aber wenn

roomTable.ajax.url("/buildings/"+ idBuilding + "/rooms/?idRoomType=" + idRoomType).load(selectFirstRow()); 

scheint genannt wird die Zeile vor nachladen die Tabelle auszuwählen, so habe ich keine Zeilenauswahl (Wählen Sie die Reihe der ersten Ladung, aber jetzt ist es nicht sichtbar). Haben Sie eine Idee, wie kann ich nach der Ladung auswählen?

UPDATE: die temporäre Lösung ist destroy: true zu verwenden, aber ich würde eine bessere Lösung wie folgt erhalten:

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 < data.accessories.length; ++index){ 
           string = string + '<i aria-hidden="true" class="'+ data.accessories[index].icon+'" data-toggle="tooltip" title="'+data.accessories[index].name+'"style="margin-right:7px;" ></i>'; 
          } 
          return string; 
         } 
         }, 
         ], 
     }); 
    } 
    else { 
     roomTable.ajax.url("/buildings/"+ idBuilding + "/rooms/?idRoomType=" + idRoomType).load(selectFirstRow()); 
    } 

Aber fnDrawCallback vor Ajax genannt wird, damit ich den Wert nicht haben, halten Datentabellen auf Laden. ..

Answer 1

Der fnInitComplete Rückruf wird nur aufgerufen, wenn die Datentabelle initialisiert wird, also nur einmal. Sie können die fnDrawCallback verwenden, die jedes Mal aufgerufen wird, wenn sich die Datatables neu zeichnen. Ändern Sie einfach fnInitComplete zu fnDrawCallback. Mehr über Datatable Callbacks (Legacy-Version) here.