AJAX Source no binding to jquery datatable in mvc asp.net
AJAX Source no binding to jquery datatable in mvc asp.net
Jbritto
Posts: 3Questions: 2Answers: 0
Hi there: I'm having an AJAX error : Datatables warning: TableId= tbprojectmanager" AJAX error. I checked the class properties and references ...everything seems to be fine. I assumen that is JSON formatting error? Please assist I don't know where is the mistake .....
Thanks in advance
Jose
references at the master page
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
Public class Project Manager
public int ProjectManagerID { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public string Office { get; set; }
public string Email { get; set; }
public string Telephone { get; set; }
public string Cellphone { get; set; }
public DateTime ? CreatedDate { get; set; }
public string CreatedBy { get; set; }
public DateTime ? UpdatedDate { get; set; }
public string UpdatedBy { get; set; }
Controller:
[HttpGet]
public JsonResult getProjectManagers()
{
using (BudgetsouthContext dc = new BudgetsouthContext())
{
var employees = dc.projectmanagers.OrderBy(a => a.Name).ToList();
return Json(new { data = employees }, JsonRequestBehavior.AllowGet);
}
}
<script type="text/javascript">
$(document).ready(function () {
$("#tbprojectmanager").DataTable({
"ajax": {
"url": "ProjectManagers/getProjectManagers",
"tye": "GET",
"datatype": "json",
},
"columns": [
{ "data": "Name", "autowidth": true },
{ "data": "Surname", "autowidth": true },
{ "data": "Office", "autowidth": true },
{ "data": "Email", "autowidth": true },
{ "data": "Telephone", "autowidth": true },
{ "data": "Cellphone", "autowidth": true },
{ "data": "CreatedDate", "autowidth": true },
{ "data": "CreatedBy", "autowidth": true },
{ "data": "UpdatedDate", "autowidth": true },
{ "data": "UpdatedBy", "autowidth": true }
]
});
});
</script>
HTML
<div style="width:400px; margin:0 auto">
<table id="tbprojectmanager" class="display" cellspacing="0" data-page-length='5'>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Office</th>
<th>Email</th>
<th>Telephone</th>
<th>Created by</th>
<th>Updated on</th>
<th>Updated by</th>
</tr>
</thead>
</table>
</div>
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
That's "type".
Otherwise, what error is shown in your browser console?
What is the data that is being returned by the server?
Allan