My datatable is not shown when I enter the products page. I deleted the foreach loop which can access all the data but my datatable does not work too. How can solve it?
View:
@model List<Product>
<div class="card shadow border-0 my-4">
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
<div class="row">
<div class="col-12 text-center">
<h2 class="text-white py-2">Ürün Listesi</h2>
</div>
</div>
</div>
<div class="card-body py-4">
<div class="container">
<div class="row pb-3">
<div class="col-6">
</div>
<div class="col-6 text-end">
<a asp-controller="Product" asp-action="Upsert" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Yeni Ürün Oluştur
</a>
</div>
</div>
<table id="tblData" class="table table-bordered table-striped" style="width:100%">
<thead>
<tr>
<th>
Başlık
</th>
<th>
Detaylar
</th>
<th>Özellikler </th>
<th>Fiyat</th>
<th>Kategori Adı</th>
<th>Kategori Numarası</th>
</tr>
</thead>
@* <tbody>
@foreach (var obj in Model)
{
<tr>
<td>@obj.Title</td>
<td>
@Html.Raw(obj.Description)
</td>
<td>
@obj.Characteristics
</td>
<td>
@obj.ListPrice
</td>
<td>
@obj.Category.Name
</td>
<td>
<div class="w-75 btn-group" role="group">
<a asp-controller="Product" asp-action="Upsert" asp-route-id="@obj.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i>Düzenle
</a>
<a asp-controller="Product" asp-action="Delete" asp-route-id="@obj.Id" class="btn btn-danger mx-2">
<i class="bi bi-trash-fill"></i>Sil
</a>
</div>
</td>
</tr>
}
</tbody> *@
</table>
</div>
</div>
</div>
@section Scripts{
<script src="~/js/product.js"></script>
}
JavaScript File Related To This Page:
$(document); ready(function() {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax":{ url:'/admin/product/getall'},
"columns":[
{ data: 'title', "width": "25%" },
{ data: 'description', "width": "15%" },
{ data: 'characteristics', "width": "15%" },
{ data: 'listPrice', "width": "10" },
{ data: 'category.name', "width": "15%" },
{
data: 'id',
"render": function (data) {
return `<div class="w-75 btn-group" role="group"> <a href="/admin/product/upsert?id=${data}" class="btn btn-primary mx-2"> <i class="bi bi-pencil-square"></i>Düzenle</a><a href="/admin/product/delete/${data}" class="btn btn-danger mx-2"><i class="bi bi-trash-fill"></i>Sil</a></div>`
},
"width": "15%"
}
]
});
}
I tried to follow the foreach loop but it will not work because I need datatable to proceed with my project. There are lots of missing things like pictures or buttons but I wanted to include my github link so you can take a look for the problem as well.
https://github.com/LisanAlGaib96/Jewelry