javascript - jQuery 数据表 - 如何设置列名称

Question

我在 ASP.NET 应用程序中插入了一个 jQuery 数据表，目前，为了显示列名称，我在 Razor View 中添加了以下代码。

<table id="myDataTable" class="display">
    <thead>
        <tr>
            <th>Contact name</th>
            <th>Title</th>
            <th>Country</th>
            <th>City</th>
            <th>Project</th>
        </tr>
    </thead>
    <tbody style="font-size:x-small"></tbody>
</table>

然后，我有用于 jQuery 数据表的 javascript...

$('#myDataTable').DataTable({
        "bServerSide": false,
        "sAjaxSource": //controller binding,
        "bAutoWidth": false,
        "bProcessing": true,
        "aoColumns": [
            { "sName": "CONTACT_NAME" },
            { "sName": "TITLE"},
            { "sName": "COUNTRY" },
            { "sName": "CITY" },
            { "sName": "PROJECT" },
        ],
        "bDestroy":true
    });

但是，当我在填写表格之前第一次渲染 HTML 时，它看起来很尴尬，因为我正在渲染一些随机 HTML(与 future 的列名称相关)，根本没有数据表...

如何定义表格的列，而不必在 HTML 中设置它，这样我就可以避免在那里出现随机文本？

谢谢!

Answer 1

只需将#myDataTable 的初始CSS 设置为visibility:hidden;，如下所示:

#myDataTable { visibility:hidden; }

这样您就可以将其放在 HTML 中，并在更新值后调用以下 JavaScript 来显示它:

document.getElementById('#myDataTable').style.visibility = "visible";