jquery - 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>

Answer 1

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" }
        ]
     });
});