將jQuery DataTable添加到Asp.NET MVC 4項目

我想將jQuery DataTable（http://www.datatables.net/）添加到我的mvc4站點。但這是行不通的。不顯示任何東西，表格看起來像添加腳本之前。將jQuery DataTable添加到Asp.NET MVC 4項目

螢火顯示錯誤：

TypeError: $(...).dataTable is not a function

**Admin_panel.cshtml** 

@model IEnumerable<Rejestracja_imprez.Models.User> 

@{ 
    Layout = "~/Views/Shared/_PanelAdmin.cshtml"; 
    ViewBag.Title = "Admin"; 
} 

    <script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="~/Scripts/jquery.dataTables.js" type="text/javascript"></script> 
    <link href="~/Content/themes/base/jquery.dataTables.css" rel="stylesheet" type="text/css"/> 

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


<table id="myDataTable"> 
....

在HTML頁面中它的工作好。

<html> 
    <head> 
     <style type="text/css" title="currentStyle"> 
      @import "../../media/css/jquery.dataTables.css"; 
     </style> 
     <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> 
     <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> 

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

    <body > 

<table id="example" > 
...

來源

2013-04-09 user1031034

你能更具體？它以什麼方式不起作用？觀察到的行爲與預期行爲有何不同？當您進行一些調試時，運行時值中特別意外的是什麼？ – David 2013-04-09 14:56:48

表不顯示任何內容，表格看起來像添加腳本之前。沒有改變。 FireBug顯示一個錯誤：'TypeError：$（...）.dataTable不是一個函數' – user1031034 2013-04-09 15:09:28

根據該錯誤，在jQuery對象上沒有稱爲'dataTable'的函數。該插件的JavaScript文件是否已加載？ jQuery的JavaScript文件被加載了嗎？（可能的話，如果它到了那個函數調用。）這兩者之間是否存在版本衝突？這是插件的正確用法嗎？您需要在瀏覽器中進行調試。如果您能夠展示一個問題的實例，我們可能會幫助您找出問題所在。 – David 2013-04-09 15:12:42

問題解決了; d

我添加jQuery腳本到App_Start文件夾BundleConfig.cs。

**BundleConfig.cs** 

bundles.Add(new ScriptBundle("~/bundles/table").Include(
         "~/Scripts/jquery.dataTables.js")); 

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css", 
         "~/Content/themes/base/jquery.ui.resizable.css", 
         ............ 
         "~/Content/themes/base/jquery.dataTables.css"));

在Admin_panel.cshtml我補充一下：

**Admin_panel.cshtml** 

@section Scripts { 

    @Styles.Render("~/Content/themes/base/css") 
    @Scripts.Render("~/bundles/table") 

    <script> 
     $(document).ready(function() { 
      $('#myDataTable').dataTable(); 
     }); 
     </script> 

}

來源

2013-04-09 17:04:25 user1031034

我的猜測是...在文件路徑

錯字
問題，在頁面的身體的鏈接的樣式表（嘗試渲染通路部分主佈局的頭）
訂單載入資源頁
錯誤/缺少額外佈局頁面

其實你試圖調用一個目前不存在的方法。

你可以嘗試通過生成的路徑引用該文件的Razor視圖（即@Url.Content("~/Scripts/jquery.dataTables.js")）

如果不工作，你可以嘗試在部分添加文件和渲染頁面佈局這部分（在適當的部分標記！）。

來源

2013-04-09 15:35:40

將jQuery DataTable添加到Asp.NET MVC 4項目

回答

相關問題