How to initialize Datatables JS correctly in an ASP.NET MVC 5 page?

Question

I have an ASP.NET MVC 5 web project that I am trying to use with DataTables.js. Despite seemingly following all instructions correctly, the project is still producing errors in the browser console. This is probably very simple, but as I've said, I have followed all written instructions I can find and then some. I have also tried installing Datatables via Nuget and using the local copies of the script with similar results.

This is my code:

@model Website.Models.Forms.Form1

@{
    ViewBag.Title = "Form1";
}

<head>
    <link href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
    <script>

        $(document).ready(function () {
            $('#myTable').DataTable(); // Correct initialization method
        });

    </script>
</head>

<body>
    <h2>Form1</h2>
    <table id="myTable" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>
</body>

Here are the errors shown:

Are the referenced JavaScript resources successfully loading in the browser's development tools? — David
– David, Commented Apr 23 at 13:08
I am able to visit the pages referenced, and the network tab claims that the resources are loading correctly. — Inglonias
– Inglonias, Commented Apr 23 at 13:12
In that case I'm not able to replicate the problem. Copying/pasting this exact code into an HTML file and opening that file successfully initializes DataTables for me. What happens when you perform a similar test, removing ASP.NET from the equation? — David
– David, Commented Apr 23 at 13:13
You are correct. Removing Asp.NET fixes the issue. However, I do sort of need the rest of my application to function, so that's not really an option. — Inglonias
– Inglonias, Commented Apr 23 at 13:15
What's the difference when testing in the ASP.NET page then? Is the resulting HTML different somehow? Are the requests for the JavaScript resources in any way different? Are their responses different? The code shown only loads a couple of resources and doesn't perform much logic. The next step here is to reduce this as much as possible while still demonstrating the problem and to find what that difference is. — David
– David, Commented Apr 23 at 13:20

Inglonias · Accepted Answer · 2025-04-23 16:06:18Z

0

It looks like there was some sort of JQuery version conflict in my code.

Removing the following line from _Layout.cshtml was able to resolve my issue:

@Scripts.Render("~/bundles/jquery")

Note that doing this will prevent JQuery from automatically loading on all of your pages, so you will need to add another way to load jQuery either to the relevant pages or to the layout. Experiment with a test page if you're encountering this issue. Good luck!

edited Apr 23 at 16:06

answered Apr 23 at 15:45

Inglonias

5301 gold badge7 silver badges20 bronze badges

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

1 Comment

Inglonias Apr 23 at 16:05

This question appears to offer a better explanation of the solution: stackoverflow.com/questions/28442960/…

Collectives™ on Stack Overflow

How to initialize Datatables JS correctly in an ASP.NET MVC 5 page?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related