DataTables not working
DataTables not working
JoeJoeJoe
Posts: 50Questions: 13Answers: 1
My solution builds without errors. When I load the webpage the data comes up, but there are no table lines/search etc.
Any help would be appreciated.
Thanks
code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#WTM_TABLE').DataTable();
});
</script>
</head>
<body>
<table id="WTM_TABLE" class="display" style="width:100%">
<thead>
<tr>
<th>Task Name</th>
<th>Start Date/Time</th>
<th>End Date/Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.
Answers
Your jQuery reference should precede your DataTables reference.
Thanks, I've now set it up like this, still not working:
Hi @JoeJoeJoe ,
We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Thank you, unfortunately I cannot provide a test case right now. I have however narrowed down the error.
I am getting a "failed to load resource: 403 (forbidden)" error which appears to relate to the following lines/folders (when I edit them out, the error goes away):
@Scripts.Render("~/Bundles/DataTables/")
@Styles.Render("~/Content/DataTables/")
Ok, I've made more progress. I no longer have any errors and the search box/previous/next/select page buttons/show entries show up. They are not functional or styled however and the row lines don't show up. I'm guessing I have to reference the buttons/styling somehow?
So far this is what I am referencing:
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")
@Scripts.Render("~/Bundles/DataTables")
@Styles.Render("~/Content/DataTables")
bundle references:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/Bundles/DataTables").Include(
"~/Scripts/DataTables/jquery.datatables.min.js"));
bundles.Add(new StyleBundle("~/Content/DataTables").Include(
"~/Content/DataTables/datatables.bootstrap4.min.css"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
));
Any idea what I am missing?