数据表在 MVC6 中无法正确显示

Question

我目前正在玩 MVC6 的第一个乐趣，但我在使用 Datatables 时遇到了一些问题。据我所知，我已经包含了应该存在的所有内容，但是每次我尝试运行代码时都会收到一个错误，提示 jquery.datatables.min 看不到 Jquery。

代码如下：

<link href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

<script type="text/javascript" charset="utf-8">

$(document).ready( function () {

    $('#datatable2').DataTable();

} );

</script>

<table class="table table-striped table-hover" id="datatable2" cellspacing="0">
    <tr>
    <th>ID</th>
    <th>Problem Description</th>
    <th>Solution</th>
</tr>

@foreach(var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ProblemID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProblemDescription)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Solution)
        </td>
    </tr>
}

有什么想法吗？这可能是非常明显的事情......

*而且我知道脚本通常应该在 _layout 中，这只是一个测试项目，以感受 MVC 5 和 6 之间的变化。

Answer 1

尝试如下

如需了解更多信息，请关注此列表dataTables js Example

以这种方式包含文件

1) jquery.dataTables.min.css，

2) jquery-2.2.0.min.js,

3) jquery.dataTables.min.js

<link href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

HTML

<table class="table table-striped table-hover" id="datatable2" cellspacing="0">
   <thead>
      <tr>
        <th>ID</th>
        <th>Problem Description</th>
        <th>Solution</th>
      </tr>
   </thead>
   <tbody>
        @foreach(var item in Model)
        {
           <tr>
               <td>
                   @Html.DisplayFor(modelItem => item.ProblemID)
               </td>
               <td>
                   @Html.DisplayFor(modelItem => item.ProblemDescription)
               </td>
               <td>
                   @Html.DisplayFor(modelItem => item.Solution)
               </td>
          </tr>
        }
   </tbody>
</table>

JS

<script type="text/javascript" charset="utf-8">    
    $(document).ready( function () {    
        $('#datatable2').DataTable();    
    });    
</script>