CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netdatatables
user3587624
user3587624

Reputation: 1471

jQuery datatables - how to set the column name

I have a jQuery datable pluged into my ASP.NET application and currently, in order to show the column names, I have the following piece of code in my 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>

Then, I have my javascript for the jQuery datatbles...

$('#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
    });

However, when I render the HTML the first time before I fill in the table, it looks awkward because I am rending some random HTML (that is related to the future column names) with no datatable at all...

How can I define the column of my table without having to set it in the HTML so I can avoid having that random text there?

Thanks!

Upvotes: 0

Views: 1938

Answers (1)

Ephraim Zeller
Ephraim Zeller

Reputation: 49

just set the initial CSS of the #myDataTable to visibility:hidden; like this:

#myDataTable { visibility:hidden; }

That way you can put it right in the HTML and just call the following JavaScript to show it after you update the values:

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

Upvotes: 1

Related Questions