While trying to load a table, I encountered an ajax error in the datatable (.net).
Below is the code for my data table:
<table id="productsTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Price</th>
<th>No of Products</th>
</tr>
</thead>
</table>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" rel="stylesheet" />
@section scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#productsTable').DataTable({
"ajax": {
"url": "/Products/GetData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name" },
{ "data": "Code" },
{ "data": "Price" },
{ "data": "Available" }
]
});
});
</script>
}
This is the controller code:
public ActionResult GetData()
{
using (DBModel db = new DBModel())
{
List<product> proList = db.products.ToList<product>();
return Json(new { data = proList }, JsonRequestBehavior.AllowGet);
}
}
product represents the database table.
Here is the model structure:
public partial class product
{
public int ProductId { get; set; }
public string Name { get; set; }
public string Code { get; set; }
public decimal Price { get; set; }
public Nullable<int> Available { get; set; }
public byte[] is_deleted { get; set; }
}
Error message received:
DataTables warning: table id=productsTable - Ajax error. For more information about this error, please see http://datatables.net/tn/7