Data does not show using data tables.

Question

User388869887 posted

I am writing a code to Read companies details.  I am using datatables. The problem is i am able to see the data in xhr using developer tools in the dataset. but it does not show up on the page. The page says there is no data in the table. While i have data stored in that table.

Here is my code.

@{
ViewBag.Title = "View";
Layout = "~/Views/Shared/BackEnd/_LayoutBackEnd.cshtml";
}
@section HeadAssets{
<script type="text/javascript" src="~/Assets/BackEnd/js/plugins/jquery/jquery.min.js"></script>
<link href="~/Assets/BackEnd/css/jquery/datatables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Assets/BackEnd/js/plugins/datatables/jquery.dataTables.min.js"></script>}
@section NavBar{
}
@section LeftContainer{
}
@section AdminBody{
<div class="content">
<table id="myDbTable">
<thead>
<tr>
<th >ID</th>
<th>Name</th>
<th>E-mail</th>
<th>Phone</th>
</tr>
</thead>

</table>
</div>
}
@section Scripts{
<script>

$(document).ready(function () {
$.ajax({
url: '@Url.Action("GetCompanies", "Company")',
method: 'get',
dataType: 'json',
success: function (data) {
$('#myDbTable').dataTable({
data: data,
columns: [
{ "data": "Id" },
{ "data": "Name" },
{ "data": "Email" },
{ "data": "Owner" },
]
});
}
});
});
</script>
}

Here is my controller code:

[HttpGet]
public JsonResult GetCompanies()
{
try
{
IEnumerable<Company> company = _companyService.GetCompanies().ToList();
IEnumerable<CompanyListViewModel> viewModelListCompanies = Mapper.DynamicMap<IEnumerable<Company>, IEnumerable<CompanyListViewModel>>(company);

return new JsonSuccessResult(viewModelListCompanies);
//return Json(accountTypes, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
Response.StatusCode = (int)ResponseCode.UnprocessableEntity;
return new JsonErrorResult(ex.ToString());
}
}

Can any body help me please. Any help in this regard will be highly appreciated. 

Answer 1

User-1838255255 posted

Hi Ahmad7600,

According to your description and code, this issue maybe related to the datatable, I have some suggestion for you to check:

1. Please try replace the local file with the CDN(Use new jQuery.js Version and Datatable.js Version).

2. Check if get the document of the datatable.

3. Check if the data format is like this.

4. if issue still not be solved, please check if meet some exception message in the Browser-F12-Console panel.  

Sample Code:

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" />
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js "></script>
    <script>
        var dataSet = [
            ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
            ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]
        ];
        $(function () {
            $('#example').DataTable({
                data: dataSet,
                columns: [
                    { title: "Name" },
                    { title: "Position" },
                    { title: "Office" },
                    { title: "Extn." },
                    { title: "Start date" },
                    { title: "Salary" }
                ]
            })
        });
    </script>

Best Regards,

Eric Du