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

在第一次加载时，所有工作正常，但

时

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

调用

似乎在重新加载表之前选择了行，所以我没有行选择（保持选择第一次加载的行，但现在它不可见）。你知道我怎么能在负载之后选择负载？

更新：临时解决方案是使用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());
    }

但是在{a}之前调用fnDrawCallback所以我没有值，datatables继续加载......

Answer 1

仅在数据表初始化时才调用 fnInitComplete 回调，因此只调用一次。您可以使用 fnDrawCallback ，每次数据表重绘自己时都会调用它。只需将 fnInitComplete 更改为 fnDrawCallback 即可。有关数据表回调的更多信息（旧版本）。

数据表首次加载和重新加载后选择第一行

1 个答案: