我试图通过在项目中使用dataTables
jquery插件来添加表C#
net mvc 5:当我尝试将jquery.dataTables.js和jquery.dataTables.css调用到代码头部时,没有发生任何事情。 因此,我遵循一个教程,并将两个文件添加到bundleConfig.cs文件,但没有加载样式文件(表格显示不正确,但没有应用样式,我也丢失了菜单样式)。如何在C#.net MVC 5中使用插件DataTable?
这是我的代码:
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)
你需要证明你查看(你如何添加脚本和CSS文件) –
请在此处添加您的看法,所以我们可以帮助您在正确的方式 –
@StephenMuecke,Smit,我在声明表格 – Atika