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>

```