未调用 DataTables 插件来显示 Json 数据答案

【问题标题】：DataTables Plugin not being called to display Json Data未调用 DataTables 插件来显示 Json 数据
【发布时间】：2018-10-22 11:58:34
【问题描述】：

我是 MVC 和 JQuery 的新手，所以我很感激我能得到的所有帮助。

我正在尝试使用 JQuery DataTables 插件在 MVC 视图上查看从 SQL 数据库检索到的数据。这是我的控制器操作：

public JsonResult Index()
    {
        var subjects = _db.Subjects.Select(x => new SubjectViewModel()
        {
            SubjectName = x.SubjectName
        }).ToList();

        return Json(subjects, JsonRequestBehavior.AllowGet);
    }

这是我的观点：

@model IEnumerable.....
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    <table id="mytable" class="display">
        <thead> <tr>
                <th> Subject Name </th>
        </tr> </thead>
     <tbody> </tbody>
</table>
</div>

<script>
    $(document).ready(function () {
        $.noConflict();
        $.ajax({
            url: '@Url.Action("Index", "SubjectViewModel")',
            type: 'Get',
            dataType: 'JSON',
            success: function (response) {
                $('#mytable').DataTable({
                    'aaData': response,
                    'aoColumns': [
                        { 'mData': 'SubjectName ' }
                    ]
                });
            }
        });
    });
</script>

我已经将我所有的 javascript 引用都放在了布局页面中，但即使我把它们放在这个视图上也没有什么区别。我得到的结果是原始 json 数据，如下所示：

{"SubjectName":"Mathematics"},{"SubjectName":"Accounting"},{"SubjectName":"Science"}

请帮助我了解我缺少什么以便 dataTable 显示 Json 数据。谢谢。

【问题讨论】：

你为什么要使用 ajax。只需将模型传递给视图并使用foreach 循环构建<tbody> 元素
按照您的建议，我使用 foreach 循环没有问题。我正在学习如何使用这个插件，因为它的附加功能，例如轻松搜索、排序和分页。我打算将它用于数据库中有大量记录的模型。
您似乎不明白 - 将您的模型传递给视图。使用foreach 循环构建<table>，然后将DataTables 插件应用于<table>（让浏览器请求您的视图真是太疯狂了，然后基本上说-对不起，我忘了向您发送所有数据-浪费需要更多时间和资源再次调用服务器以获取它）

标签： jquery json asp.net-mvc-5 datatables

【解决方案1】：

您已经将数据作为模型传递给剃须刀视图，正如@Stephen Muecke 所说，使用如下循环：

@model IEnumerable.....
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    <table id="mytable" class="display">
        <thead> <tr>
                <th> Subject Name </th>
        </tr> </thead>
        <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>item</td>
            </tr>
        }
        </tbody>
    </table>
</div>

【讨论】：