无法在MVC应用程序中初始化DataTable
Cannot get DataTable to initialize in MVC App
我正在通过使用实体框架填充的模型填充表。我可以很好地填充表格，但它需要太长时间加载，使页面在加载时非常无响应，并且占用太多内存。
所以我试图使用数据表，以限制显示的数据，同时仍然允许我搜索表中的所有数据。但是我不能让它初始化。我遵循了很多指南，链接了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>
我不明白为什么它不起作用，我试过改变表类显示，我试过改变链接到其他堆栈问题和博客帖子，但仍然没有锁。
我特别需要搜索功能和限制显示的列数。
谢谢。
编辑:我在Chrome开发人员工具上收到这个错误:
Index:47368 Uncaught TypeError: $(…)。dataTable不是一个函数(…)(匿名函数)@ 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
我试图在这个编辑中修复，但我仍然收到它。
好的，我已经通过使用前面的答案修复了这个问题:
TypeError: $(…)。DataTable不是一个函数
问题是我引用Jquery两次，所以我评论了共享引用，它工作!
相关文章：
- 使用javascript函数在页面初始化后加载jquery
- 未捕获错误:无法在初始化之前调用方法;
- 如何在剑道网格初始化后设置pageSizes
- React redux初始化功能，无论状态变化如何
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular
- 尝试初始化(）Spine's控制器和故障
- Angular.js延迟控制器初始化
- 对插件初始化后动态加载的元素进行样式设置
- Angular JS控制器初始化错误
- 如何在Div加载页面上初始化DataTable
- Jquery DataTable 重新初始化
- 使用数组的本地数组作为数据源初始化Jquery DataTable
- 使用JSON DataTable初始化X-Editable
- 使用时间线谷歌图表api与DataTable初始化
- 无法在MVC应用程序中初始化DataTable
- 用分页初始化dataTable，然后禁用它
- 如何检查变量是否是一个初始化的DataTable
- datatable没有初始化columnFilter插件
- 无法使用columnFilter重新初始化DataTable错误
- 不能重新初始化DataTable, jquery数据表
