KeyTable not applying focus
KeyTable not applying focus
aalgawi
Posts: 2Questions: 1Answers: 0
I'm trying to use DataTables and KeyTable to make an interactive online spreadsheet. I'm attempting to follow this example here: https://datatables.net/extensions/keytable/examples/initialisation/simple.html. I am using ASP.NET MVC to try to acheive this and have DataTables version 1.10.15 installed through NuGet.
I have ensured to include the css and js files stated in the example:
here's what I have in my BundleConfig file:
bundles.Add(new ScriptBundle("~/bundles/lib").Include(
"~/Scripts/jquery-3.3.1.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js",
"~/Scripts/datatables/jquery.dataTables.min.js",
"~/Scripts/datatables/dataTables.keyTables.min.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap-lumen.css",
"~/Content/datatables/css/jquery.dataTables.min.css",
"~/Content/datatables/css/keyTable.dataTables.min.css",
"~/Content/site.css"));
and here is where I render these files in my Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - FBA SuperHub</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
here is my View:
@{
ViewBag.Title = "PurchaseLog";
}
<h2>PurchaseLog</h2>
<table id="purchases" name="invent" class="display" style="width:100%">
<caption>Inventory report</caption>
<thead>
<tr>
<th>IS</th>
<th>Product name</th>
<th>Order date</th>
<th>Order number</th>
<th>Units ordered</th>
<th>Buy price</th>
<th>Sell price</th>
<th>fee</th>
<th>Total cost</th>
<th>Total profit</th>
</tr>
</thead>
<tbody name="body">
<tr>
<td>B0837483</td>
<td>Lip serum</td>
<td>16/07/18</td>
<td>ae12344</td>
<td>10</td>
<td>12.76</td>
<td>18.75</td>
<td>2.73</td>
<td>127.5</td>
<td>38</td>
</tr>
<tr>
<td>B0837483</td>
<td>Lip serum</td>
<td>16/07/18</td>
<td>ae12344</td>
<td>10</td>
<td>12.76</td>
<td>18.75</td>
<td>2.73</td>
<td>127.5</td>
<td>38</td>
</tr>
</tbody>
</table>
@section scripts
{
<script>
var table = $(document).ready(function () {
$('#purchases').DataTable({
});
new $.fn.dataTable.KeyTable(table, {
});
});
</script>
}
The DataTable loads successfully with the appropriate styling, and hovering over a row highlights it but clicking on a specific cell does nothing. Inspecting the element shows that the focus class is not being applied to the cell when it is clicked. I don't know how to proceed from here so I was hoping from some help, any guidance will be greatly appreciated
Answers
Try this:
And remove the
new $...KeyTablestuff.I think the issue is that you are assigning the result of
$(document).ready()tovar tablenot the DataTable!Using
keysis generally easier anyway.Allan
Thanks for your input Allan and for picking out my mistake. However this did not solve my problem. I rewrote that bit of javascript multiple times and also tried using the more basic keys option that you have shown in your response with no luck at all. I tried the more complex method in hopes of it suddenly working but that was probably hopeful thinking.
Any more ideas for what could be going wrong?