I am populating a table through a model which is using being filled with the Entity Framework. I can fill the table fine but it takes far too long to load and makes the page very unresponsive while loading and utlises too much memory.
So I am trying to use DataTables in order to limit data shown while still allowing me to search all the data in the table. However I cannot get it to initialise. I have followed many guides, linked JQuery, Linked the datatables API, the CSS but still does not work. It just shows a normal table.
Here is my Controller:
[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 }).
}
And here is my View:
@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>
I cannot understand why it doesnt work, I have tried changing the Tables class to Display, I have tried changing the link to various ones posted on other Stack questions and blog posts but still no lock.
Specifically I need the search functionality and limiting how many columns displayed.
Thanks.
EDIT: I am receiving this error on Chrome developer tools:
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
Which I have tried to fix in this edit however I am still receiving it.
