Datatables select first row after first load and reload

Question

I'm using datatables 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:

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

On the first load all work fine, but when

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

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?

UPDATE: the temporary solution is to use destroy: true but I would like a better solution like this:

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

But fnDrawCallback is called before ajax so I don't have the value, datatables keep on loading...

Answer 1

The fnInitComplete callback is called only when the datatable is initialized, so only once. You can use the fnDrawCallback, which is called every time the datatables redraws itself. Just change fnInitComplete to fnDrawCallback. More about datatable callbacks (legacy version) here.