如何在实体框架中应用 jQuery 数据表？答案

【问题标题】：How to apply jQuery datatable in Entity Framework?如何在实体框架中应用 jQuery 数据表？
【发布时间】：2017-04-13 11:20:44
【问题描述】：

我曾尝试在实体框架中使用 jQuery 数据表。

这是我的代码：

  @model IEnumerable< MvcApplication6.Models.Student>

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

    <h2>Index</h2>



   <!DOCTYPE html>

   <html>
   <head>
   <script type="text/javascript" charset="utf8" 
    src="https://code.jquery.com/jquery-1.12.4.js"></script>


     <link rel="stylesheet"  type="text/css" href="~/Content/DataTables/css/jquery.dataTables.css" />
      <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>




</head>
<body>
    @Html.ActionLink("Create New","create")
    <table id="tbl" class="table table-striped table-bordered" >
    <thead>

         <tr> 
             <th>
                 @Html.DisplayNameFor(model=>model.StudentId)
             </th>

             <th>
                 @Html.DisplayNameFor(model=>model.FirstName)
             </th>
              <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Batch)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Class)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.School)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Domicile)
        </th>
              <th>
          Actions
        </th>
         </tr>

    </thead>
    <tbody>
        @foreach(var item in Model)
        {

            <tr>
                 <td>@Html.DisplayFor(model=>item.StudentId)</td>

                <td>@Html.DisplayFor(model=>item.FirstName)</td>
                  <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Batch)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Class)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.School)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Domicile)
        </td>
                <td>
                     @Html.ActionLink("Edit", "edit", new  { id=item.id})|
                     @Html.ActionLink("Details", "details", new  { id=item.id})|
                     @Html.ActionLink("Delete", "delete",new  { id=item.id},new { onclick="return confirm('Are you sure?');"})
                </td>
            </tr>
        }

    </tbody>

</table>


</body>
</html>



<script type="text/javascript" >
 //jQuery.noConflict();
    $(document).ready(function ()
    {

        $("#tbl").DataTable();
    });
    $(document).ready(function () {



    })
</script>

jQuery 数据表未应用。我在实体框架中使用了剃刀引擎。我已经在 ado.net 的 aspx 引擎中尝试过，那里的 jQuery 数据表工作正常。

【问题讨论】：

Try this
尝试将最后的脚本部分移到结束 html 标记之前。
你没有加载 datatables.js

标签： c# jquery sql-server asp.net-mvc datatables

【解决方案1】：

将您的数据表链接更改为https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js 和https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css CDN。

链接和脚本中的“~/”用于服务器端解析 URL。脚本和链接标签是客户端，所以它不会工作。

【讨论】：

我也在底部尝试过 CDN 和脚本。现在它也显示如下错误（索引）：219 Uncaught TypeError: $(...).DataTable is not a function at HTMLDocument . ((index):219) 在 Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362) 在 Function.ready (jquery- 1.12.4.js:3582) 在 HTMLDocument.completed (jquery-1.12.4.js:3617)
您确实确认包含的文件实际加载了吗？您是否在 HTML 标记内移动了底部的 javascript？页面加载后，您查看生成的文档 javascript 了吗？缺少的报价或类似的东西可能会破坏其他包含
是的，我已将脚本移至底部。你说页面加载后生成的文档 javascript，我需要在哪里看到这个？在浏览器工具中，所有内容都显示在网络类别中，如 css、js