删除所有行后如何在DataTable中显示「暂无数据」

问题根源 #

你之前直接用jQuery移除<tr>元素，DataTable内部的数据并没有同步更新，因此无法触发空表状态的显示逻辑。必须使用DataTable官方API来操作行数据，同时配置空表提示文本。

解决方案步骤 #

1. 修正删除按钮的ID问题
   原代码中删除按钮用了重复的id="delThisData"，违反HTML规范（ID需唯一），改成class选择器。同时给删除函数传递当前按钮元素，方便定位行。

2. 初始化DataTable时保存实例并配置空表提示
   初始化时把DataTable实例存为变量，方便后续调用API；通过language.emptyTable设置空表时的提示文本。

3. 用DataTable API删除行
   通过实例的row().remove().draw()方法删除行，这会同步更新DataTable内部数据并重新渲染表格，触发空状态显示。

修改后的完整代码 #

DataTable列配置修改

{
    "data": "Action",
    render: (data, type, row) => {
        return `<div class="actionIcon">
            <a id="viewExamination" onclick="individualDetails('${row["NAME"]}', '${row["BIRTHDAY"]}', '${row["Phone Number"]}')" data-toggle="modal" data-target="#asdffdsddd" data-backdrop="false" data-keyboard="false">
                <i class="fa-solid fa-outdent"></i>
            </a>
            <a class="delThisData" onclick="deleteDetailsNewHired(this)">
                <i class="fas fa-trash-alt"></i>
            </a>
        </div>`;
    }
}

DataTable初始化与删除函数

// 初始化DataTable时保存实例，替换成你的表格ID
const myTable = $('#yourTableId').DataTable({
    // 你的其他配置项（比如columns、ajax等）
    language: {
        emptyTable: "暂无数据" // 设置空表显示文本
    }
});

// 修改删除函数
function deleteDetailsNewHired(elem) {
    // 定位当前行对应的DataTable行对象
    const targetRow = myTable.row($(elem).closest('tr'));
    // 删除行并重新绘制表格
    targetRow.remove().draw();
}

说明 #

执行删除操作后，DataTable会自动检查内部数据量：当数据为空时，会自动显示你配置的「暂无数据」文本，无需额外判断行数。

内容的提问来源于stack exchange，提问作者Strywyr