Datatable header 好的，但是 body 将 Datatable 连接到 Api - 不返回数据

Question

这些是我在浏览器中的错误：

加载资源失败：服务器返回状态 404（未找到）

jquery.datatables.js:3406 未捕获的类型错误：无法读取未定义的属性 'length'

这是 JSON 直接回复：

页面来源如下：

@model IEnumerable<SE01.Models.BMFixture>

@{
    ViewBag.Title = "Fixtures";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Fixtures</h2>

<table id="bmfixtures" class="table table-bordered table-hover">
    <thead>
        <tr>

            <th>Market</th>
            <th>Market</th>
            <th>Selection</th>
            <th>Bookmaker</th>
            <th>Odds</th>
            <th>Delete</th>

        </tr>
    </thead>
    <tbody>
           
    </tbody>
</table>


@section scripts
{
    <script>
        $(document).ready(function () {
            $("#bmfixtures").DataTable({
                ajax: {
                    url: "/Api/BMFixtures",
                    datasrc: ""
                },
                columns: [
                    {
                        data: "marketname",
                        render: function(data, type, bmfixture) {
                            return "<a href='/bmfixtures/edit/" + bmfixture.Id + "'>" + bmfixture.marketname + "</a>";
                        }
                    },
                    {
                        data: "marketname"
                    },
                    {
                        data: "selectionname"
                    },
                    {
                        data: "bookmakername"
                    },
                    {
                        data: "bookmakerodds"
                    },
                    {
                        data: "id",
                        render: function(data) {
                            return "<button class='btn-link js-delete' data-bmfixture-id=" + data + ">Delete</button>";
                        }
                    }

                ]
            });

            $("#bmfixtures").on("click", " .js-delete", function () {
                var button = $(this);

                if (confirm("Are you sure you want to delete this fixture?")) {
                    $.ajax({
                        url: "/api/bmfixtures/" + button.attr("data-bmfixture-id"),
                        method: "DELETE",
                        success: function () {
                            button.parents("tr").remove();
                        }
                    });
                }
            });
        });
    </script>
}

Answer 1

您好，我尝试了一个简单的演示，它似乎工作正常，但我没有使用您的数据，所以可能 JSON 格式有问题。我所做的唯一不同的事情是使用单引号并完全限定 url - 所以尝试（例如 url: "http://localhost:60241/api/bmfixtures"）

示例（更改了链接等中的数据，让您明白）：

@{
    ViewBag.Title = "Fixtures";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Fixtures</h2>

<table id="bmfixtures" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th></th>
            <th>id</th>
            <th>type</th>
            <th>text</th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

@section scripts
{
    <script>

        $("#bmfixtures").DataTable({
            ajax: {
                // Replace below line with: url: "http://localhost:60241/api/bmfixtures", (in your version)
                url: "http://api.scb.se/OV0104/v1/doris/en/ssd",
                dataSrc: ''
            },
            columns: [
                {
                    data: 'id',
                    render: function (data, type, bmfixture) {
                        return "<a href='/bmfixtures/edit/" + bmfixture.id + "'>" + bmfixture.id + "</a>";
                    }
                },
                { data: 'id' },
                { data: 'type' },
                { data: 'text' },
                {
                    data: 'id',
                    render: function (data) {
                        return "<button class='btn-link js-delete' data-bmfixture-id=" + data + ">Delete</button>";
                    }
                }
            ]
        });
    </script>
}

Datatable header 好的，但是 body 将 Datatable 连接到 Api - 不返回数据

Datatable header Okay but body connecting Datatable to Api - not returning data

api

asp.net-mvc

datatable

jquery

asp.net-ajax