如何防止jquery dataTable插件在没有数据时添加行和消息

Question

我们的产品负责人希望当表格中没有数据时，空表格只显示表头。但是我似乎无法阻止dataTable创建一个带有“empty…”消息的行。

以下是我用来初始化dataTable的代码。我知道这里有些东西是错误的，我一直在尝试不同的方法。:)

$('#InBox').dataTable({
    "bFilter": false,
    "bPaginate": false,
    "bLengthChange": false,
    "bInfo": false,
    "oLanguage": {
        "sEmptyTable": '',
        "sInfoEmpty": ''
    }
});

这里是我尝试放在dataTable的init函数中的代码，但我不确定如何让它工作。

/* Table is empty - create a row with an empty message in it */
            var anRows[0] = document.createElement('tr');

            if (typeof oSettings.asStripClasses[0] != 'undefined') {
                anRows[0].className = oSettings.asStripClasses[0];
            }

            var nTd = document.createElement('td');
            nTd.setAttribute('valign', "top");
            nTd.colSpan = oSettings.aoColumns.length;
            nTd.className = oSettings.oClasses.sRowEmpty;
            if (oSettings.fnRecordsTotal() > 0) {
                if (oSettings.oLanguage.sZeroFilterRecords.indexOf("_MAX_") != -1)
                    oSettings.oLanguage.sZeroFilterRecords = oSettings.oLanguage.sZeroFilterRecords.replace("_MAX_", oSettings.fnRecordsTotal());
                nTd.innerHTML = oSettings.oLanguage.sZeroFilterRecords;
            } else {
                nTd.innerHTML = oSettings.oLanguage.sZeroRecords;
            }

            anRows[iRowCount].appendChild(nTd);

丹

- dcary

Answer 1

试一下这个

$('#InBox').dataTable({
  "bFilter": false,
   "bPaginate": false,
   "bLengthChange": false,
   "bInfo": false,
   "oLanguage": {
    "sEmptyTable": '',
    "sInfoEmpty": ''
   },
   "sEmptyTable": "There are no records",
 });

否则您可以尝试这个。

$('#InBox').dataTable({
  "bFilter": false,
   "bPaginate": false,
   "bLengthChange": false,
   "bInfo": false,
   "oLanguage": {
    "sEmptyTable": '',
    "sInfoEmpty": ''
   }
 });
$('.dataTables_empty').html("No record found.");

- Muthukumar M

---

我的目标是在表格为空时不显示任何消息。我希望行不被创建。我有一个按钮，可以向dataTable添加行。我只需要添加逻辑，在添加新行之前删除“dataTables_empty”行即可。我使用了你的代码。我只是设置了空引号，这样就没有消息了。如果没有更优雅的方法呈现，我会将你的答案标记为答案。感谢你的帮助。 - dcary

Answer 2

如果您想从datatable插件中删除附加的tbody，您可以尝试以下解决方法：

$('.dataTables_empty').parent().parent().remove();

- Marco Luly

Answer 3

虽然这篇文章有点老，但是为了那些使用搜索引擎寻找正确答案的人，我将介绍我是如何完成的。

从dataTables源代码中删除或注释掉以下行：

anRows[iRowCount].appendChild(nTd);

在压缩版本中，搜索并删除：

b[i].appendChild(c);

- Bacon Brad

Answer 4

你可以使用oLanguange参数来自定义DataTable插件：

"oLanguage": { "sZeroRecords": "-Put customized text-", "sEmptyTable": "-Put customized text-" }

And if you want to remove those, just put these components into null:
"oLanguage": { "sZeroRecords": '', "sEmptyTable": '' }

希望能对您有所帮助！

- spongecode

Answer 5

最新的隐藏消息的方法是使用语言选项。

$('#loggedMessages').DataTable({
    "language": {
       "emptyTable": ' ',
       "zeroRecords": ' '
     }
 });

- StingyJack