Is there a setting to stop the display of "No data available in table" in the DataTable?

Question

Initially my table has no data and I get "No data available in table" which is the expected functionality.

I'd like to have no text or row created as I will be populating the table via Ajax depending on user action.

Is there a setting to stop the display of this row in the table? I can't seem to find one. This code works but the first row reads "No data available in table". This is the jQuery code:

$.ajax({
    type: 'GET',
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {

        $.post("/Home/selectRooms", { xtitle: data.xglobalTitle }, function (data) {

            var ndx = 0;
            $.each(data.xroom_name, function (key, value) {

                var Xroom_name = data.xroom_name[ndx];
                var Xroom_plan = data.xroom_plan[ndx];

                var column =
                  ('<tr>' +
                    '<td>' +
                    '<div class="img-container">' +
                    '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                    '</div>' +
                    '</td>' +
                    '<td id="imgname">' + Xroom_name + '</td>' +
                    '<td class="text-right">' +
                    '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                    '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                    '</td>' +
                    '</tr>');

                document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;

                ndx++;

            });

        });

    }
})

Answer 1

It works for me.

var someTableDT = $("#some-table").on("draw.dt", function () {
    $(this).find(".dataTables_empty").parents('tbody').empty();
}).DataTable(/*init object*/);