Question

我刚尝试将DataTable放入我的项目中。它看起来很酷而且很健壮。为了快速获得结果，我将this instruction放入html文件中，它就像魅力一样。这是the screenshot。

对该html结果充满信心，然后，我在.Net Core 2中创建了一个新项目，并将这些代码放入About / Contact模板页面。我将html代码移除到cshtml的是 head 和 body 标记。但我得到了这样的简单表格，the screenshot。

我尝试做的事情，使用F12开发者工具调试了javascript，我发现“对象不支持属性或方法'DataTable。”“

为什么在VS 2017 .net核心2中会发生这种情况？同时，它在html文件中运行良好。

我强调链接（css和js）在html中工作正常，但它在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>

如何克服这个？请，建议......

我是否想念一些荒谬的东西？

Answer 1

尝试使用这个在ASP.NET Core项目中工作的cdn链接。

＆＃13;

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

＆＃13;

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

＆＃13;

我举了一个例子，试着用它来复制它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.Net Core中的DataTable看起来很简单

1 个答案: