Question

我试图通过DotNetCore中我的控制器上的动作从AJAX获取一些数据。结果应该在DataTable中显示6行，并显示Only One，并且我还必须等待一两分钟才能使数据表加载该行。这个表看起来根本不响应，它看起来很老式，而且字体很棒，但是我不知道为什么所有这些都发生了（导入了bootrap和fontawesome css）。

有人可以帮帮我吗？

当我试图从模型中获取数据时（没有AJAX和DataTables）它向我显示了6行。

以下是代码：

Index.cshtml

  <link href="~/css/jquery.dataTables.css" rel="stylesheet" />
<br>
<h4>Products</h4>
<hr />
<div class="container">

    <div class="col-md-12">
        <div class="row col-md-12 col-sm-12">

        </div>
        <table class="table tbl-products table-responsive table-bordered table-striped text-center">
            <thead>
            <tr>
                <td>Id</td>

                <td>Name</td>

                <td>Category</td>

                <td>Price</td>

                <td>Quantity</td>

                <td></td>
            </tr>

            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

@section scripts{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>
    <script src="~/js/jquery.dataTables.js"></script>

<script src="~/js/dataTables.bootstrap.js"></script>
    <script>
        $(function() {
            var table = $('.tbl-products').DataTable({
                ajax: {
                    url: '@Url.Action("GetProducts","Products")',
                    dataSrc: "",
                success: function (msg) {
                    console.log('success' + msg.success);

                }
            },
                columns:[
                    {
                        data: "id"
                    },
                    {
                        data: "name"
                    },
                    {
                        data: "category"
                    },
                    {
                        data: "price"
                    },
                    {
                        data: "quantity"
                    },
                    {
                        data: "id",
                        render: function(data) {
                            var url = "@Url.Action("Edit","Products")" + "/" + data;
                            return "<a href='" + url + "' class='btn btn-primary'>View</a> <a class='btn btn-danger'>Delete</a>"
                        }
                    }
                ],
                "language": {
                    "legthMenu": '_MENU_ entries per page',
                    "search": '<i class="fa fa-search"></i>',
                    "paginate": {
                        "previous": '<i class="fa fa-angle-left"></i>',
                        "next": '<i class"fa fa-angle-right"></i>'
                    }
                }
            });
        });
    </script>
}

ProductsController.cs：

public IActionResult GetProducts()
        {
            var model = _repository.Product.ToList();

            return Ok(model);
        }

这是Console中的输出：

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at dataTables.bootstrap.js:47
    at dataTables.bootstrap.js:39
    at dataTables.bootstrap.js:41

以下是该视图中的图片： p.s不要介意类别行中的[object Object]

使用Ajax的DataTables在DotNetCore上只返回一行

0 个答案: