ajax sourced datatable does not display any data and no error message is shown

Question

the code for datatable call in jquery is as below

$(document).ready(function () {
    $("#tableUserList").DataTable({
        "ajax": {
            "url": "AdminHome.aspx/getUsersForTable",
            "dataType": "json",
            "cache": false,
            "contentType": "application/json; charset=utf-8",
            "dataSrc": "d",
            "type": "GET"
        },
        "columns": [
            {"data": "d[id]"},
            {"data": "d[username]"},
            {"data": "d[user_type]"},
            {"data": "d[first_name]"},
            {"data": "d[last_name]"},
            {"data": "d[address]"},
            {"data": "d[email]"},
            {"data": "d[phone_no]"},
        ]
    });
});

When I checked the console no error is shown but neither is any data loaded into the datatable. My HTML table is as follows

<table id="tableUserList" class="table table-hover">
    <thead>
        <tr>
            <th>UserID</th>
            <th>Username</th>
            <th>UserType</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Address</th>
            <th>Email</th>
            <th>Contact</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>UserId</td>
            <td>Username</td>
            <td>UserType</td>
            <td>FirstName</td>
            <td>LastName</td>
            <td>Address</td>
            <td>Email</td>
            <td>Contact</td>
        </tr>
    </tbody>
</table>

and my ajax call returns data in this format.Showing a single row of returned data for simplicity

{
   "d":[
      {
         "id":1,
         "username":"admin",
         "first_name":"admin",
         "last_name":"admin",
         "phone_no":"1234567210",
         "address":"abc",
         "email":"admin@gmail.com",
         "user_type":"admin"
      },
      ...
   ]
}

the data is returned properly means I am doing something wrong in binding the received data to the DataTable. Please suggest a solution.

Answer 1

I think your code will be fine if you fix what you are passing to "columns": [{"data": "d[id]"}, .... In the data property you would pass name of property from the data object so change it like "columns": [{"data": "id"}, ... and there you can also specify the title of this column when passing title property.

I give you a simple example with javascript source type of data, but it is analogical for the ajax sourced data.

$(document).ready(function () {
    var data = {
      "d":[
        {
           "id":1,
           "username":"admin",
           "first_name":"admin",
           "last_name":"admin",
           "phone_no":"1234567210",
           "address":"abc",
           "email":"admin@gmail.com",
           "user_type":"admin"
        },
        {
           "id":2,
           "username":"user 1",
           "first_name":"user",
           "last_name":"first",
           "phone_no":"1234567210",
           "address":"address",
           "email":"user@gmail.com",
           "user_type":"user"
        }
      ]
    };
    
    $("#tableUserList").DataTable({
        "data": data.d,
        "columns": [
            {"data": "id", title: "ID"},
            {"data": "username", title: "Username"},
            {"data": "first_name", title: "First Name"},
            {"data": "last_name", title: "Last Name"},
            {"data": "phone_no", title: "Phone"},
            {"data": "address", title: "Address"},
            {"data": "email", title: "Email"},
            {"data": "user_type", title: "Type"}
        ]
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<table id="tableUserList" class="table table-hover">
</table>