CODEWITHSUNDEEP
javascripthtmldatatabledatatables
Engr. Arda
Engr. Arda

Reputation: 177

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

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++;

            });

        });

    }
})

Upvotes: 9

Views: 24887

Answers (5)

SHUBHAM RUHELA
SHUBHAM RUHELA

Reputation: 17

$('#table').dataTable({
    //initialization params as usual
    fnInitComplete: function () {
        if ($(this).find(".dataTables_empty").length == 1) {
            $(this).parent().hide();
        }
    }
});

This will hide only in that case when there is no data.

Upvotes: 0

fcunited
fcunited

Reputation: 180

Next CSS worked for me to totally hide that block (not only delete text):

.dataTables_empty
{
    display:none;
}

Upvotes: 1

Salman Sarfraz
Salman Sarfraz

Reputation: 19

Below worked for me:

$(document).ready(function () {
        $("#TABLE_ID").DataTable();      
        $(".dataTables_empty").empty();
    });

Upvotes: 1

Миха Makarychev
Миха Makarychev

Reputation: 86

It works for me.

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

Upvotes: 6

G_S
G_S

Reputation: 7110

I guess you might be looking at the language settings of datatables.

language : {
        "zeroRecords": " "             
    },

(Note the space between " ". (Its a hack but found it to be useful for now.)

$(document).ready(function () {

	var serverData = [
	]
	var table = $('#example').DataTable({
   language : {
            "zeroRecords": " "             
        },
		data: serverData,
		columns: [
			{ data: "name" },
			{ data: "age" },
			{ data: "isActive" },
			{ data: "friends" },
		],
		'columnDefs': [{
			'targets': 2,
			'render': function (data, type, full, meta) {
				let checked = ''
				if (data) {
					return '<input type="checkbox" checked / >';
				}
				else {
					return '<input type="checkbox"  / >';
				}
				return data;
			}
		},
		{
			'targets': 3,
			"render": function (data, type, full, meta) {
				var selectInitial = "<select>";
        var selectClosing = "</select>";
        var options = '';
				$.each(data, function (key, value) {
					options = options+"<option value="+value.id+">"+value.name+"</option>";
				});
				return selectInitial+options+selectClosing;
			}
		}
		],
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script><link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.css'>

<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>isActive</th>
                <th>friends</th>
                 
            </tr>
        </thead>
    </table>

Upvotes: 11

Related Questions