Question

已解决，见下文

我将我的html文件更改为包含这样的标题名称，并删除了javascript文件中的列声明。如果有人想要，也会发布javascript文件。

    <table id="example" class="display" cellspacing="0">
        <thead>
            <tr>
                <th>User ID</th>
                <th>Name</th>
                <th>Active</th>
                <th>Email</th>
                <th>Type</th>
                <th>Address</th>
                <th>City</th>
                <th>State</th>
                <th>Zip Code</th>
                <th>Phone</th>
                <th>Shirt Size</th>
                <th>Company Name</th>
                <th>Member Since</th>
            </tr>
        </thead>
    </table>

我正在尝试让DataTables在我的网站上运行。我已经将数据正确显示但由于某种原因我的标题标题不会出现。数据数组是正确的。我已尝试过此链接中建议的内容，但它无法正常工作。

Jquery datatables not showing column headings

以及https://datatables.net/examples/data_sources/js_array.html

上的文档

如何显示标题？是因为有太多可能吗？

$(document).ready(function () {
    var userData = [];
    $.ajax({
        type: "GET",
        url: "/api/User",
        contentType: "application/json",
    }).done(function (d) {
        var userArray = [];
        //console.log(d);
        for (i = 0; i < d.length; i++) {
            userData[i] = [];
            userData[i].push(d[i].id, d[i].isActive, d[i].name, d[i].email, d[i].type, d[i].address,
            d[i].city, d[i].state, d[i].zip, d[i].phone, d[i].tshirtSize, d[i].companyName, d[i].dateCreated);
        }
        console.log(userData);

        $('#example').DataTable({
            "aaData": userData,
            "aoColumns": [
                { title: "User ID" },
                { title: "Active" },
                { title: "Email" },
                { title: "Type" },
                { title: "Address" },
                { title: "City" },
                { title: "State" },
                { title: "Zip Code" },
                { title: "Phone" },
                { title: "Shirt Size" },
                { title: "Company Name" },
                { title: "Member Since" }
            ]
        });
    });
});

我的HTML课程。其余的动态加载此部分将出现在正文

中

<script src="js/admin-home.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<table id="example" class= "display" cellspacing="0">
</table>

Answer 1

使用列属性

$('#example').dataTable( {
  "columns": [
    { "title": "My column title" },
    ..
...
....
  ]
} );

数据表标题

1 个答案: