"dataTable" class being added automatically to html
"dataTable" class being added automatically to html
jonjon1324
Posts: 3Questions: 1Answers: 0
Hello, I am having some confusion regarding exactly how the class "dataTable"' is being added to my tables.
In my cshtml file, I have the following:
` <div class="row padding-small">
<div class="col-xs-12 results-table">
<table id="SelectedServices" style="border-collapse:collapse" class="table data-table white-background hidden"></table>
</div>
</div>`
but when I use the Chrome developer tools to inspect my code, it has the following:
<table id="SelectedServices" style="border-collapse:collapse; width: 100%" class="table data-table white-background dataTable no-footer"></table>
If you notice, it adds the dataTable class to the table classes and gets rid of the "hidden" class. I know how the "hidden class" is eliminated...through the .js file:
if (services.length > 0) {
$('#SelectedServices').removeClass("hidden");
$('#SelectedServices').dataTable().fnClearTable();
$('#SelectedServices').dataTable().fnAddData(services);
$('#SelectedServices').dataTable().fnDraw();
My only guess is that the dataTable class is being added in the same .js file when
$('#SelectedServices').DataTable({
//column names here
})'
gets called, and based on a comment here (https://datatables.net/forums/discussion/13832/datatables-1-9-4-css-not-being-applied),
It does however adddataTableclass automatically now, and that should be the primary class used to identify a DataTable.
However, the above comment is the only place I can find that says that dataTable is added automatically. I don't wanna just take its word so I am looking for some sort of official documentation that tells me that this dataTable is added.
Furthermore, if the above is correct, I notice that the .dataTable CSS class that is actually changing the style on the page is one from a custom style.css file created, instead of the dataTables.bootstrap.css file that has table.dataTable as a class, even thoguh both css files are linked to my project. Why does it choose the style.css one? Does the fact that one is named table.dataTable and the other is just .dataTable have anything to do with this?
I know this was long but hopefully someone can help!
Thank you!
This question has an accepted answers - jump to answer
Answers
It does automatically add it. This is the code that does so.
I'd need a link to the page so I could inspect the element and say. It will be due to loading order or selector precedence.
Allan
Ah, I didn't realize you were the creator of DataTables. I should have taken your comment at your word then
Anyway, in my _Layout.cshtml view (I'm using ASP.NET MVC), I call @Styles.Render("~/Content/bootstrap.min.css", "~/Content/style.css") and don't call /dataTables.bootstrap.css at all, so I'm thinking that's why only the .dataTable class of /style.css is looked at at all.
Thank you
That sounds about right (although difficult to be certain without looking at it). You could override the default class name, or remove it with jQuery if you don't want it. Its really there to say "hey - I'm a DataTable" (regardless of what styling library is used)!
Allan
Wait, I was wrong. I am calling Styles.Render on /dataTables.bootstrap.css
and this is how they appear when I inspect the element on Chrome:
So finally I guess due to the CSS rules, the fact that style.css is loaded last means it takes precedence.