I recently started working with DataTable.js, and when I tried to integrate it into my ASP.NET Core MVC 5.0 project, I encountered an error:
Uncaught TypeError: $(...).DataTable is not a function
After doing some research on Google, I discovered that this error could be caused by using an older version of jQuery. However, I updated to the latest version 3.7.1:
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
I also attempted to change the way the function was being called, from ID to class, but that did not resolve the issue either. Below is my layout page where I include datatable.min.js and datatable.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - BergClinic</title>
<!-- Other script and link tags removed for brevity -->
</head>
<body>
<header>
<!-- Navbar code omitted for brevity -->
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-white-50 bg-primary">
<div class="container">
© 2021 - BergClinic
</div>
</footer>
<!-- Other scripts included here (some irrelevant ones are omitted) -->
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
In my Index View Page, I have implemented datatable as shown below:
@model IEnumerable<BergClinics.Models.Doctor>
@{
ViewData["Title"] = "Index";
}
<!-- Table markup and other details skipped for conciseness -->
<script>
$('.datatable-doctor').DataTable({
dom: 'Bfrtip',
columnDefs: [
{
responsivePriority: 1,
targets: -1
},
{
targets: [0],
orderable: true,
searchable: true,
printable: true,
width: "120"
}
]
});
</script>
If anyone can identify where I've gone wrong or what might be the issue, I would greatly appreciate any assistance.