Why is there no data in the table body?

Question

I have been trying to display data on jQuery data table but with no success. I am able to get the data from .Net Core Controller and in my view I am able to see the data when I debug the output but there is no output on the table body section. What am I missing in order to successfully show the data from my database.

<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table dataTable no-footer" data-hs-datatables-options="{
 &quot;columnDefs&quot;: [{
    &quot;targets&quot;: [0, 7],
    &quot;orderable&quot;: false
  }],
 &quot;order&quot;: [],
 &quot;info&quot;: {
   &quot;totalQty&quot;: &quot;#datatableWithPaginationInfoTotalQty&quot;
 },
 &quot;search&quot;: &quot;#datatableSearch&quot;,
 &quot;entries&quot;: &quot;#datatableEntries&quot;,
 &quot;pageLength&quot;: 15,
 &quot;isResponsive&quot;: false,
 &quot;isShowPaging&quot;: false,
 &quot;pagination&quot;: &quot;datatablePagination&quot;}" role="grid" aria-describedby="datatable_info">
    <thead class="thead-light">
        <tr role="row">
            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                <div class="custom-control custom-checkbox">
                    <input id="datatableCheckAll" type="checkbox" class="custom-control-input">
                    <label class="custom-control-label" for="datatableCheckAll"></label>
                </div>
            </th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">BranchID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 177px;">DepartmentID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 146px;">EmailAddress</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 114px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"> 
</script>
<script>
$(function () {
    
    $.ajax({
    type: "POST",
    url: "/ApplicationUsers/LoadData",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});
});


// INITIALIZATION OF DATATABLES
// =======================================================
function OnSuccess(response) {
    $.noConflict();
    $('#datatable').DataTable(
        {
            dom: 'Bfrtip',
            bLengthChange: true,
            lengthMenu: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true,
            searching: false,
            data: response,
            columns: [
                { 'data': 'UserID' },
                { 'data': 'UserName' },
                { 'data': 'BranchID' },
                { 'data': 'DepartmentID' },
                { 'data': 'EmailAddress' }]
        });
};





 </script>

all i meant was, try checking if response might be nested to another level e.g. it could be like {values :[{obj1}, {obj2}]}. so try doing console.log with your response json to see its structure in that case you need to mention that key e.g. response.data or response.values (for the example json ) — Muhammad Murad Haider, Jan 11 '21 at 11:52
yes, actually you've expanded particular objects so i was wondering, seems like the key for the json array is `data`, so you need to refer the array by response.data — Muhammad Murad Haider, Jan 11 '21 at 12:01

Pramesh · Answer 1 · 2021-01-12T14:15:34.520

mapping of your JSON data in your DataTables in "columns" does not look like the same order as your data and the data key name starts with lowercase. Please see below.

Be sure to have your JQuery library before DataTables library and just have one version of JQuery library

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> 
</script>

$(document).ready(function () { 
     $('#datatable').DataTable({
        ajax: {
        url: '/ApplicationUsers/LoadData',
        "dataSrc": ""
        },
        columns: [
            { data: "userID" },
            { data: "userName" },
            { data: "departmentID" },
            { data: "branchID" },
            { data: "emailAddress" }
        ]
     });
});

in my browsers console I get the error 'Uncaught TypeError: $(...).DataTable is not a function' — Zain Nabi, Jan 12 '21 at 05:59
that usually means it is not finding DataTable library. please update your Jquery and DataTable library — Pramesh, Jan 12 '21 at 14:08

score 0 · Answer 2 · answered Jan 11 '21 at 12:55

0

your success callback looks like its missing the proper function call

$.ajax({
 type: "POST",
 url: "/ApplicationUsers/LoadData",
 data: '{}',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(response) {  //maybe try to call like this?
  OnSuccess(response);
 }
 failure: function (response) {
    alert(response.d);
 },
 error: function (response) {
    alert(response.d);
 }
 });
 });

answered Jan 11 '21 at 12:55

JBahn77

64
3

I now get the error 'No data available in table' – Zain Nabi Jan 11 '21 at 13:50
im not familiar with datatables but i found what you are trying to do on this page https://datatables.net/manual/ajax looks like the ajax hast to be passed to the DataTable() function – JBahn77 Jan 11 '21 at 14:58

score 0 · Answer 3 · edited Jan 12 '21 at 14:19

You need to change your column values to camelCase:

 columns: [
     { 'data': 'userID' },
     { 'data': 'userName' },
     { 'data': 'branchID' },
     { 'data': 'departmentID' },
     { 'data': 'emailAddress' }]
});

If you have the error 'Uncaught TypeError: $(...).DataTable is not a function' ,you can refer to the this SO question. And check in devtools Network,open devtools and go to the page,you can see the result like this:

Here is a working demo:

Controller:

public IActionResult LoadData()
        {
            List<Data> l = new List<Data> { new Data { UserID = 1, UserName = "u1", BranchID = 11, DepartmentID = 111, EmailAddress = "e1" }, new Data { UserID = 2, UserName = "u2", BranchID = 22, DepartmentID = 222, EmailAddress = "e2" } };
            return Json(l);
        }

Data.cs:

public class Data {
    public int UserID { get; set; }
    public string UserName { get; set; }
    public int BranchID { get; set; }
    public int DepartmentID { get; set; }

    public string EmailAddress { get; set; }


    }

View:

<table id="datatable" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table dataTable no-footer" data-hs-datatables-options="{
                 &quot;columnDefs&quot;: [{
                    &quot;targets&quot;: [0, 7],
                    &quot;orderable&quot;: false
                  }],
                 &quot;order&quot;: [],
                 &quot;info&quot;: {
                   &quot;totalQty&quot;: &quot;#datatableWithPaginationInfoTotalQty&quot;
                 },
                 &quot;search&quot;: &quot;#datatableSearch&quot;,
                 &quot;entries&quot;: &quot;#datatableEntries&quot;,
                 &quot;pageLength&quot;: 15,
                 &quot;isResponsive&quot;: false,
                 &quot;isShowPaging&quot;: false,
                 &quot;pagination&quot;: &quot;datatablePagination&quot;}" role="grid" aria-describedby="datatable_info">
    <thead class="thead-light">
        <tr role="row">
            <th class="table-column-pr-0 sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 44px;">
                <div class="custom-control custom-checkbox">
                    <input id="datatableCheckAll" type="checkbox" class="custom-control-input">
                    <label class="custom-control-label" for="datatableCheckAll"></label>
                </div>
            </th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserID</th>
            <th class="table-column-pl-0 sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 299px;">UserName</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 195px;">BranchID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 177px;">DepartmentID</th>
            <th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 146px;">EmailAddress</th>
            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 114px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
@section scripts{
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script>
        $(function () {

            $.ajax({
                type: "POST",
                url: "/ApplicationUsers/LoadData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });


        // INITIALIZATION OF DATATABLES
        // =======================================================
        function OnSuccess(response) {
            //$.noConflict();
            $('#datatable').DataTable(
                {
                    dom: 'Bfrtip',
                    bLengthChange: true,
                    lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true,
                    searching: false,
                    data: response,
                    columns: [
                        { 'data': 'userID' },
                        { 'data': 'userName' },
                        { 'data': 'branchID' },
                        { 'data': 'departmentID' },
                        { 'data': 'emailAddress' }]
                });
        };

    </script>
}

result:

Why is there no data in the table body?

3 Answers3