是否有设置停止在DataTable中显示“表中没有可用数据”？

Posted 2023-05-07

【中文标题】是否有设置停止在DataTable中显示“表中没有可用数据”？

【英文标题】：Is there a setting to stop the display of "No data available in table" in the DataTable?

【发布时间】：2018-08-22 12:22:57

【问题描述】：

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

我不希望创建任何文本或行，因为我将根据用户操作通过 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 + '"  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++;

            );

        );

    
)

【问题讨论】：

当你向dataTables API发送一个空数组时，它会自动返回“No Data Is Available”。这没有发生吗？

它正在发生。我说“有没有设置停止在表格中显示这一行？我好像找不到。”

如果您愿意，您可以从dataTables.min.js 中删除该文本，但是当您有一个空数组时，只需使用 jquery 删除该表的第一行（在 tbody 内），而不是更改源文件。你能展示一下你尝试过的东西吗

我更新了我的问题。你可以看看那里

我只是想删除数据库中没有数据时出现的“表中没有可用数据”文本。因为第一行总是显示“表中没有可用数据”。

【参考方案1】：

我猜您可能正在查看数据表的语言设置。

language : 
        "zeroRecords": " "             
    ,

（注意“”之间的空格。（这是一个hack，但现在发现它很有用。）

$(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"  cellspacing="0">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>isActive</th>
                <th>friends</th>
                 
            </tr>
        </thead>
    </table>

【讨论】：

这行得通，但是这次表格上的删除和更新按钮在单击时不起作用。为此我能做些什么

当你没有数据时，你不会得到删除/更新按钮吧？

serverData 在我的示例中是一个变量。您需要适当地修改它以适合您的示例。您只需要获取语言对象

您能否留下您的电子邮件地址或Skype，以便我获得您的支持。

我知道我来晚了。看看有什么我可以帮忙的吗？

【参考方案2】：

它对我有用。

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

【讨论】：

嗨，欢迎来到 Stack Overflow。在回答已经有公认答案的问题时，请务必添加一些额外的见解，说明为什么您提供的回复是实质性的，而不是简单地呼应原始发帖人已经审查过的内容。这在您提供的“纯代码”答案中尤其重要。

【参考方案3】：

以下对我有用：

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

【参考方案4】：

下一个 CSS 为我工作，完全隐藏了该块（不仅删除文本）：

.dataTables_empty

    display:none;