如何使用 jquery.datatable 显示空表

Posted 2023-05-07

【中文标题】如何使用 jquery.datatable 显示空表

【英文标题】：How to show empty table using jquery.datatable

【发布时间】：2019-07-08 08:09:06

【问题描述】：

我正在使用 jquery.dataTables.js 来显示我的表数据，但在初始加载时，我想要一个空表，然后当我选择一些过滤器后，表会相应地加载数据。 我也使用 iDeferLoading，但它需要加载一些初始数据，但我想要一个空表

版本 1.9.4

文件 jquery.dataTables.js

代码 - jsfiddle.net/anki18/Lx97wouy

【问题讨论】：

如果你想要一个空表，在没有行的 html 表上初始化它，然后以编程方式添加新行

就是这个问题，怎么做？

无论表中有多少数据，过程都是完全一样的。只需遵循 Datatables 网站上的用户指南

【参考方案1】：

按以下方式进行

HTML 代码

<table id="new-table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
</table>

JQUERY 代码

$("#new-table").DataTable();

您可以使用所需的选项初始化 DataTable

编辑 JsFiddle

【讨论】：

不工作，如果我这样做，它会给我警报框并且消息是 - DataTables 警告（表 id = 'new-table'）：从数据源请求行的未知参数'1' 0

@AnkitVaidya 在这种情况下，您需要更新问题以显示您正在使用的代码，因为您做错了什么。此代码工作正常

【参考方案2】：

如果您创建的表格没有正确的 html 标签，则会出现错误

查看this 示例

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Salary</th>
            <th>Hired Date</th>
        </tr>
    </thead>
</table>

<button id="addButton">
Click me to add new rows
</button>

JQUERY

$(document).ready(function () 
    window.dataTable = $('#myTable').DataTable();

    $('#addButton').click(function() 
        window.dataTable.rows.add([
            [
                "Tiger Nixon",
                "System Architect",
                "$3,120",
                "2011/04/25"
            ],
            [
                "Garrett Winters",
                "Director",
                "$5,300",
                "2011/07/25"
            ]
        ]).draw()
    )
);

【讨论】：

这是我在初始加载时调用 api 的代码 - jsfiddle.net/anki18/Lx97wouy