jQuery datatables - how to set the column name

Question

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!

Are you talking about a flash of unstyled content? Try starting with the html part hidden. — Jason P
– Jason P, Commented Dec 17, 2015 at 20:08
Hi, no flash in here. Basically I just have a HTML that will render the column names once I enhance with the jQuery datatables but before I enhance with the datatables I want it to be hidden. If I try to use the HTML hidden attribute, then it will be always hidden as I don't know a way to distinguish when I've called the datatables. Not sure if my explanation makes sense though :) — user3587624
– user3587624, Commented Dec 17, 2015 at 20:20

AGE · Accepted Answer · 2015-12-17 21:14:09Z

1

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

edited Dec 17, 2015 at 21:14

AGE

3,7873 gold badges43 silver badges63 bronze badges

answered Dec 17, 2015 at 20:24

Ephraim Zeller

812 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3587624 Over a year ago

Nice! It did the trick! However, I had to set it like this... document.getElementById('myDataTable').style.visibility = "visible";

Ephraim Zeller Over a year ago

arf ... right... hashtag on the brain, sorry ;) (glad it worked out for you)

Collectives™ on Stack Overflow

jQuery datatables - how to set the column name

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related