JQuery 數據表不適用於 ASP.NET MVC 5

Question

我已經使用 nuget 包管理器控制台和命令install-package jquerydatatablesmvc將 jquery 數據install-package jquerydatatablesmvc安裝到我的 MVC 5 項目中，並安裝了 1.9.4 版。

但是，在包含所需的腳本和 css 文件后，數據表仍然無法工作。

這是我添加到頁面的內容：

<link href="~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" />
<script src="~/Scripts/DataTables-1.9.4/media/js/jquery.js"></script>
<script src="~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

和 jquery 代碼：

 <script type="text/javascript">
    $(document).ready(function () {
        $('#myTable').DataTable();
    });
</script>

這是實際的表：

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Registered By</th>
            <th>Is Active</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
           @foreach (var m in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => m.Name)</td>
                    <td>@Html.DisplayFor(modelItem => m.RegisteredBy)</td>
                    <td>@Html.DisplayFor(modelItem => m.IsActive)</td>
                    <td>@Html.ActionLink("Edit", "Edit", new { id = m.Id }) | 
                    @Html.ActionLink("Details", "Details", new { id = m.Id }) | 
                    @Html.ActionLink("Delete", "Delete", new { id = m.Id })</td>
                </tr>
            }

    </tbody>
</table>

我哪里搞砸了？

Answer 1

在這里我已經解釋了如何在asp.net MVC應用程序中一步一步地實現jQuery DataTable。

只需按照幾個步驟在您的應用程序中完成這項工作

第 1 步：編寫一個 MVC 操作以從數據庫中獲取數據

public ActionResult loaddata()
{
 using (MyDatabaseEntities dc = new MyDatabaseEntities())
  {
    var data = dc.Customers.OrderBy(a => a.ContactName).ToList();
    return Json(new { data = data }, JsonRequestBehavior.AllowGet);
  }
}

第 2 步：編寫 html 和 jQuery 以顯示數據庫數據

完整的 HTML 代碼

@{
ViewBag.Title = "Index";
}

<h2>Part 1 : Implement jQuery Datatable in ASP.NET MVC</h2>
<div style="width:90%; margin:0 auto;">
   <table id="myTable">
      <thead>
        <tr>
          <th>Employee Name</th>
          <th>Company</th>
          <th>Phone</th>
          <th>Country</th>
          <th>City</th>
          <th>Postal Code</th>
       </tr>
    </thead>
 </table>
</div>
<style>
  tr.even {
   background-color: #F5F5F5 !important;
 }
</style>
@* Load datatable css *@
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@* Load datatable js *@
@section Scripts{
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
   $(document).ready(function () {
      $('#myTable').DataTable({
        "ajax": {
        "url": "/home/loaddata",
        "type": "GET",
        "datatype": "json"
      },
        "columns" : [
           { "data": "ContactName", "autoWidth": true },
           { "data": "CompanyName", "autoWidth": true },
           { "data": "Phone", "autoWidth": true },
           { "data": "Country", "autoWidth": true },
           { "data": "City", "autoWidth": true },
           { "data": "PostalCode", "autoWidth": true }
        ]
     });
   });
 </script>
}