データシートは最初のロードとリロード後に最初の行を選択します

Question

私はdatatablesを使用しており、テーブルの最初の行を選択する必要があります。 問題は、テーブルがリロードされたときの最初の行を選択することです（テーブルは建物の部屋を表示するので、ユーザーは建物を変更できます）。 これは私のコードです：最初のロードで

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"); 
} 

すべてが正常に動作しますが、

​​

が呼び出されたときには、テーブルをリロードする前に、行を選択すると思われるので、私は（選択なしの行を持っていません最初のロードの行を選択したままにしておきますが、現在は表示されません）。 後で負荷を選択するにはどうすればいいですか？

UPDATE：一時的な解決策はdestroy: trueを使用することですが、私はこのようなよりよい解決策をしたいと思います：

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()); 
    } 

しかしfnDrawCallbackは、私が値を持っていないので、DataTableのは、負荷に保つAJAX前に呼び出されます。 ..

Answer 1

fnInitCompleteコールバックは、データテーブルが初期化されている場合にのみ呼び出されます。 fnDrawCallbackを使用できます。これは、データ型が再描画されるたびに呼び出されます。 ちょうど変更fnInitComplete〜fnDrawCallbackデータテーブルコールバック（レガシーバージョン）の詳細here