DataTable in .Net Core looks plain

Question

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 2 and put those code into About/Contact template page. What I removed html code to cshtml are head and body tag. But I got plain table like this, the 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 but it doesn't work in VS 2017 .Net Core 2.

<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....

Do I miss something ridiculous ?

Answer 1

Try this link of cdn this are working in project of ASP.NET Core.

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />

I have given an example just try to replicate it with yours it works.

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>


<script>
        $(document).ready(function ()
        {
            $("#myTable").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": true, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/AllFood/LoadFoodData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columnDefs":
                [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }],
                "aoColumnDefs": [{
                    "bSortable": false,
                    "aTargets": [7, 8]
                }],
                "columns": [
                    { "data": "FoodID", "name": "FoodID", "autoWidth": true },
                    { "data": "FoodTypeName", "name": "FoodTypeName", "autoWidth": true },
                    { "data": "FoodName", "name": "FoodName", "autoWidth": true },
                    { "data": "MealTypeName", "name": "MealTypeName", "autoWidth": true },
                    { "data": "DishTypeName", "name": "DishTypeName", "autoWidth": true },
                    { "data": "FoodCost", "name": "FoodCost", "autoWidth": true },
                    { "data": "Createdate", "name": "Createdate", "autoWidth": true },
                    {
                        "render": function (data, type, full, meta)
                        { return '<a class="btn btn-info" href="/Food/Edit/' + full.FoodID + '">Edit</a>'; }
                    },
                    {
                        data: null, render: function (data, type, row)
                        {
                            return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.FoodID + "'); >Delete</a>";
                        }
                    },
                ]

            });
        });


        function DeleteData(ID)
        {
            if (confirm("Are you sure you want to delete ...?"))
            {
                DeleteFoodItem(ID);
            }
            else
            {
                return false;
            }
        }


   function DeleteFoodItem(FoodID)
    {
        var url = '@Url.Content("~/")' + "Food/Delete";

        $.post(url, { ID: FoodID }, function (data)
                {
                    if (data)
                    {
                        oTable = $('#myTable').DataTable();
                        oTable.draw();
                    }
                    else
                    {
                        alert("Something Went Wrong!");
                    }
                });
    }

</script>    

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />

<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />

    <div style="width:90%; margin:0 auto;">
        <table id="myTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>FoodID</th>
                    <th>FoodType</th>
                    <th>FoodName</th>
                    <th>MealType</th>
                    <th>DishType</th>
                    <th>FoodCost</th>
                    <th>Createdate</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
        </table>
</div>