代码之家 › 专栏 › 技术社区 › Engr. Arda

是否有设置来停止DataTable中“表中无可用数据”的显示?

datatables datatable html javascript

7

Engr. Arda · 技术社区 · 7 年前

最初,我的表没有数据,我得到了“表中没有可用数据”,这是预期的功能。

我希望不创建任何文本或行,因为我将根据用户操作通过Ajax填充表。

是否有停止表中此行显示的设置?我好像找不到。此代码正常工作,但第一行显示“表中无可用数据”。这是jQuery代码:

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

            });

        });

    }
})

4 回复 | 直到 7 年前

1

10

G_S 7 年前

我想您可能正在查看datatables的语言设置。

language : {
        "zeroRecords": " "             
    },

(请注意“.”之间的空格。(这是一种黑客行为,但现在发现它很有用。)

$(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>

2

3

ÐÐ¸ÑÐ° Makarychev 6 年前

这对我有用。

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

3

1

Salman Sarfraz Nausherwan Aslam 4 年前

以下内容对我有用:

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

4

0

fcunited 3 年前

下一个CSS让我完全隐藏了该块(不仅仅是删除文本):

.dataTables_empty
{
    display:none;
}