JQuery 数据表不适用于 ASP.NET MVC 5

Posted

技术标签:

【中文标题】JQuery 数据表不适用于 ASP.NET MVC 5【英文标题】:JQuery Datatables not working on ASP.NET MVC 5 【发布时间】:2015-08-15 01:06:19 【问题描述】:

我使用带有命令install-package jquerydatatablesmvc 的 nuget 包管理器控制台将 jquery 数据表安装到我的 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>

我在哪里搞砸了?

【问题讨论】:

浏览器的控制台有错误吗? 哦,我没有检查。现在,它说“Uncaught TypeError: $(...).DataTable is not a function” 您还有其他关于 jQuery 的参考资料吗? (我在您的代码 sn-p 中看到了一个,但页面中是否还有其他引用它?)如果您有多个对 jQuery 的引用,这可能是导致它的原因 主布局页面上有这一行:@Scripts.Render("~/bundles/jquery") 最后一个错误意味着 jQuery 现在没有初始化。您能否验证您的 ~/bundles/jQuery 捆绑包是否引用了 jQuery,并且它是否出现在数据表脚本标记上方?如果是这样,那么您可能需要发布页面的 html 源代码(由浏览器呈现) - 只是脚本标签和相关的数据表。 【参考方案1】:

这里我已经逐步解释了here如何在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>

【讨论】:

虽然您的回答可能是正确的,但最好解释一下原始问题的问题所在。如果您可以指出错误所在的行或解释遗漏的概念或步骤,那么这对用户会更有帮助,然后发布分步教程。

以上是关于JQuery 数据表不适用于 ASP.NET MVC 5的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET MVC5 JQuery 数据表 CSS 不适用于 Bootstrap Lumen

asp.net webform:RegisterClientScriptBlock 不适用于 jquery

ASP.NET ScriptBundle 不适用于 .min.js?

Azure 中的捆绑不适用于 bootstrap 和 jquery、ASP.NET MVC 5

添加 FriendlyUrls 时,jQuery ajax 调用不适用于 ASP.Net Web 窗体

Asp.Net MVC 5 Jquery 验证不适用于带有提交事件的 ajax 帖子,显示为有效表单