[英]JQuery Datatables not working on ASP.NET MVC 5
I've used the nuget Package Manager Console with the command install-package jquerydatatablesmvc
to install jquery datatables to my MVC 5 project and it installed version 1.9.4.我已经使用 nuget 包管理器控制台和命令
install-package jquerydatatablesmvc
将 jquery 数据install-package jquerydatatablesmvc
安装到我的 MVC 5 项目中,并安装了 1.9.4 版。
However, after including the required scripts and css files, the data table is not still working.但是,在包含所需的脚本和 css 文件后,数据表仍然无法工作。
Here is what I've added to the page:这是我添加到页面的内容:
<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>
And the jquery code:和 jquery 代码:
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
Here is the actual table:这是实际的表:
<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>
Where did I mess up?我哪里搞砸了?
Here I have explained here how to implement jQuery DataTable in asp.net MVC application step by step.在这里我已经解释了如何在asp.net MVC应用程序中一步一步地实现jQuery DataTable。
just follow a few steps for doing that work in your application只需按照几个步骤在您的应用程序中完成这项工作
Step 1 : Write a MVC action for fetch data from database第 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);
}
}
Step 2 : Write html and jQuery for show database data第 2 步:编写 html 和 jQuery 以显示数据库数据
Complete HTML code完整的 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>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.