Datatable headers

Question

SOLVED, SEE BELOW

I changed my html file to include header names like this and removed the column declaration within the javascript file. Will post the javascript file as well if anyone wants.

    <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>

I am trying to get DataTables to work on my site. I've gotten my data to show up correctly but for some reason my header titles won't appear. The data array is correct. I've tried the things suggested at this link but it didn't work.

Jquery datatables not showing column headings

As well as the documentation at https://datatables.net/examples/data_sources/js_array.html

How do I get the headers to show? Is it because there are too many maybe?

$(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" }
            ]
        });
    });
});

My HTML class. The rest is loaded dynamically this section will appear in the body

<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

use Columns property

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