DataTable in .Net Core looks plain

Daleman

Hi All,

I just tried put DataTable in my project. It look cool and robust. For quick result. I put this instruction into html file and it worked like charm. This is the screenshot

Confidence with that html result, then, I created a new project in .Net Core and put those code into About/Contact template. What I remove html code to cshtml are head and body tag. But I got plain table like this screenshot.

What I tried to do debugged the javascript by using F12 Developer Tools and I found "Object doesn't support property or method 'DataTable.'"

Why this could happen in VS 2017 .net core 2 ? Meanwhile, it works well in html file.
I emphasize the link (css and js) just works fine in html.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript" ></script>
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
</script>

How to overcome this ? Please, advice....

Rgds,

kthorngren

Make sure you aren't loading jQuery twice with your .NET project.

Kevin

Daleman

@kthorngren. thank you for your reply.

Usually, a new VS project template has jQuery reference in the _Layout.cshtml and in the above code, I put all those reference in the "About.cshtml" file. It means I laod twice jQuery file.

in the _Layout.cshtml:

<script src="~/lib/jquery/dist/jquery.js"></script>

in the About.cshtml:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>`

Is this what you mention above ?
And I have to eliminate one of them ?

---

I just tried to remove jQuery file ref in the About.cshtml and DataTable still looks plain and I got this error in javascript

Please, advice....

allan

Is jQuery now being loaded before DataTables and before you attempt to use it? The load order is important - DataTables is a plug-in for jQuery, so jQuery needs to be loaded first.

Allan

Daleman

@allan, Thank you for your reply and short explanation. Where should I put jQuery ?
In the _Layout.cshtml or in the About.cshtml file ?

for further information, I create a project with nested layout. Is this an issue while using DataTable where jQuery file was loaded in the top layout, _Layout.cshtml ?

Rgds,