如何在C＃.net MVC 5中使用插件DataTable？

Question

我試圖通過在項目中使用dataTables jquery插件來添加表C# net mvc 5：當我嘗試將jquery.dataTables.js和jquery.dataTables.css調用到代碼頭部時，沒有發生任何事情。 因此，我遵循一個教程，並將兩個文件添加到bundleConfig.cs文件，但沒有加載樣式文件（表格顯示不正確，但沒有應用樣式，我也丟失了菜單樣式）。

這是我的代碼：

 public class BundleConfig 
    { 

     public static void RegisterBundles(BundleCollection bundles) 
      { 
       bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js")); 

       bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate*")); 


       bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        "~/Scripts/modernizr-*")); 

       bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.js", 
        "~/Scripts/respond.js", 
       // "~/Scripts/DataTables/jquery.dataTables.min.js" 
       "~/Scripts/DataTables/jquery.dataTables.js" 
       )); 

       bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/DataTables/css/jquery.dataTables.css", 
        "~/Content/bootstrap.css", 
       "~/Content/site.css" 
       // "~/Content/DataTables/css/jquery.dataTables.css" 
       //"~/Content/DataTables/css/jquery.dataTables.min.css" 
        )); 
       BundleTable.EnableOptimizations = true; 
       //bundles.IgnoreList.Clear(); 
       //bundles.IgnoreList.Clear(); 
      }  

我的視圖（我嘗試了網上的一個例子）：

 <div style="margin-top:140px;"> 
     <table class=" distable table-striped table-hover dt-responsive" cellpadding="0" cellspacing="0" border="0" id="example"> 
     <thead> 
      <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="gradeX"> 
      <td>Trident</td> 
      <td> 
       Internet 
       Explorer 4.0 
      </td> 
      <td>Win 95+</td> 
      <td class="center">4</td> 
      <td class="center">X</td> 
      </tr> 
      <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.6</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.7</td> 
      <td>Win 98+/OSX.1+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Epiphany 2.20</td> 
      <td>Gnome</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 1.2</td> 
      <td>OSX.3</td> 
      <td class="center">125.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tfoot> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
      </tr> 
     </tfoot> 
     </table> 
    </div> 

    @section scripts 
     { 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       alert("debut"); 
       $('#example').dataTable(); 

       alert("finnnn"); 
      });</script> 
     }  

在_layout文件：

 @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 

Answer 1

我是什麼爲了獲得與您的問題相同的內容，只需將其添加到.cshtml(View)文件中，

數據表的.css和.js的

標題鏈接

<link href="~/Content/Bootstrap/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" /> 
<script src="~/Content/Bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> 

HTML

<table id="tblOffers" class="table table-hover table-bordered topBorder row-border stripe" style="width:100%"> 

jQuery的

$(document).ready(function() { 
     $("#tblOffers").DataTable({ 
      "sScrollX": "100%", 
      "scrollY": "400px", 
      "scrollCollapse": true, 
     }); 
     $("#tblOffers_filter input").attr('placeholder', 'Search here'); 
    }); 

Answer 2

你需要在實際呈現腳本您六EW這個工作

像這樣：

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/bootstrap")