【发布时间】：2017-03-28 17:30:51
【问题描述】：
我正在通过使用实体框架填充的模型填充表。我可以很好地填满表格，但加载时间太长，并且在加载时页面非常无响应，并且占用了太多内存。
所以我尝试使用 DataTables 来限制显示的数据，同时仍然允许我搜索表中的所有数据。但是我无法让它初始化。我遵循了许多指南，链接了 JQuery，链接了数据表 API，CSS 但仍然无法正常工作。它只是显示一个普通的表格。
这是我的控制器：
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Index(System.Web.Mvc.FormCollection collection)
{
DateTime lastMonth = DateTime.Today.AddMonths(-3);
string selectedList = collection["list"];
string selectedGroupType = collection["grouptype"];
List<SelectListItem> ddl = new List<SelectListItem>();
List<SelectListItem> ddl2 = new List<SelectListItem>();
var entities = new TableEntities();
var stock = entities.stocks.Take(0).ToList();
//System.Windows.Forms.MessageBox.Show(selectedList);
//System.Windows.Forms.MessageBox.Show(selectedGroupType);
if (selectedList == null && selectedGroupType == null)
{
stock = entities.stocks.Take(0).ToList();
}
else if (selectedGroupType == "grouptype=Select+GroupType" || selectedGroupType == null || selectedGroupType == "")
{
if (selectedList == null || selectedList == "")
{
stock = entities.stocks.Where(g => (g.DateEntered >= lastMonth)).Distinct().ToList();
}
else
{
stock = entities.stocks.Where(g => (g.ProductGroup == selectedList) && (g.DateEntered >= lastMonth)).Distinct().ToList();
}
}
else if (selectedList == "list=Select+Company" || selectedList == null || selectedList == "")
{
stock = entities.stocks.Where(g => (g.GroupType == selectedGroupType) && (g.DateEntered >= lastMonth)).Distinct().ToList();
}
else
{
stock = entities.stocks.Where(g => (g.ProductGroup == selectedList) && (g.GroupType == selectedGroupType) && (g.DateEntered >= lastMonth)).Distinct().ToList();
}
var stocktemp = entities.stocks.Select(g => g.ProductGroup).Distinct().ToList();
foreach (var item in stocktemp)
ddl.Add(new SelectListItem() { Text = item });
ViewData["list"] = ddl;
stocktemp = entities.stocks.Select(g => g.GroupType).Distinct().ToList();
foreach (var item in stocktemp)
ddl2.Add(new SelectListItem() { Text = item });
ViewData["grouptype"] = ddl2;
return View(stock);
//Select(u => { u.StockId, u.ProductGroup , u.Category , u.GroupType , u.ItemType , u.Model , u.SerialNo , u.Status , u.DateArrived , u.CurrentLocation , u.Description , u.TerminalId }).
}
这是我的观点：
@model IEnumerable<WebApplication1.Models.stock>
<script src="~/scripts/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100&lang=en">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<body>
<form class="my-form" method="post" action="~/Table/Index">
<div class="filter">
@Html.DropDownList("list", "Select Company")
@Html.DropDownList("grouptype", "Select GroupType")
<br type />
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Model">
<input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for SerialNo">
<br />
<button input type="submit"> Submit </button>
</div>
</form>
<div class="scrollingTable">
<table class="table-fill" id="myTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.StockId)
</th>
<th>
@Html.DisplayNameFor(model => model.ProductGroup)
</th>
<th>
@Html.DisplayNameFor(model => model.Category)
</th>
<th>
@Html.DisplayNameFor(model => model.GroupType)
</th>
<th>
@Html.DisplayNameFor(model => model.ItemType)
</th>
<th>
@Html.DisplayNameFor(model => model.Model)
</th>
<th>
@Html.DisplayNameFor(model => model.SerialNo)
</th>
<th>
@Html.DisplayNameFor(model => model.NR)
</th>
<th>
@Html.DisplayNameFor(model => model.Status)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.DateArrived)
</th>
<th>
@Html.DisplayNameFor(model => model.CurrentLocation)
</th>
<th>
@Html.DisplayNameFor(model => model.TerminalId)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.StockId)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProductGroup)
</td>
<td>
@Html.DisplayFor(modelitem => item.Category)
</td>
<td>
@Html.DisplayFor(modelItem => item.GroupType)
</td>
<td>
@Html.DisplayFor(modelItem => item.ItemType)
</td>
<td>
@Html.DisplayFor(modelItem => item.Model)
</td>
<td>
@Html.DisplayFor(modelItem => item.SerialNo)
</td>
<td>
@Html.DisplayFor(modelItem => item.NR)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.DateArrived)
</td>
<td>
@Html.DisplayFor(modelItem => item.CurrentLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.TerminalId)
</td>
</tr>
}
</tbody>
</table>
</div>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[5];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function myFunction2() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput2");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[6];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
$(function () {
$("#myTable").dataTable();
})
</script>
</body>
我不明白为什么它不起作用，我尝试将 Tables 类更改为 Display，我尝试将链接更改为发布在其他 Stack 问题和博客文章中的各种链接，但仍然没有锁定。
特别是我需要搜索功能并限制显示的列数。
谢谢。
编辑：我在 Chrome 开发人员工具上收到此错误：
Index:47368 Uncaught TypeError: $(...).dataTable is not a function(...)(anonymous function) @Index:47368fire @jquery-1.10.2.js:3062fireWith @jquery-1.10.2.js :3174ready@jquery-1.10.2.js:447completed@jquery-1.10.2.js:118
我已尝试在此编辑中修复它，但我仍然收到它。
【问题讨论】：
-
</form>的位置很奇怪。尝试在<div class="scrollingTable">之前关闭表单 -
完成，也更改了编辑。但是，这并没有解决问题。
-
尝试将数据表初始化javascript放在文件的最末尾或将其放在
$(document).ready(function()中。如果这不起作用，您需要调试客户端（Chrome 开发者工具或同等工具）。 -
我收到错误 Index:47368 Uncaught TypeError: $(...).dataTable is not a function(...)(anonymous function) @ Index:47368fire @ jquery-1.10.2.js: 3062fireWith @ jquery-1.10.2.js:3174ready @ jquery-1.10.2.js:447completed @ jquery-1.10.2.js:118 当我链接数据表时，这对我来说很奇怪？我也会更新我的编辑。
-
好的，我解决了这个问题，请参阅下面的答案。
标签： javascript c# jquery asp.net-mvc datatable