DataTable columns values showing Only DefaultContent

Question

No errors at all table is binding to 3 rows but data is not showing and only defaultContent '-' is showing I tried to handle null case.

 public ActionResult GetUserResult()
    {
        var ent = new QuickFixEntities();
        var data = ent.GetAllUsers().ToList();
        return Json(new { data = data }, JsonRequestBehavior.AllowGet);
    }

<table class="table table-bordered display" id="UserDetail" style="width:100%">
  <thead class="bordered-darkorange bg-blue-mytheme">
    <tr style="word-wrap:break-word; word-break:break-word;">
      <th>Email</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Gender</th>
      <th>Date Of Birth</th>
      <th>Email Confirmed?</th>
      <th>Active Status</th>
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Model) { string classActiveStatus = (bool)item.IsEnabled ? item.EmailConfirmed ? "success" : "active" : "danger";
    <tr class="@classActiveStatus">
      <td>@item.Email</td>
      <td>@item.FirstName</td>
      <td>@item.LastName</td>
      <td>@item.Gender</td>
      <td>@item.DateOfBirth</td>
      <td>@item.EmailConfirmed</td>
      <td>
        @if ((bool)item.IsEnabled) {
        <a href="#" onclick="confirmDisable('@item.Id');" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>Disable</a> } else {
        <a href="#" onclick="confirmEnable('@item.Id');" class="btn btn-success btn-xs"><i class="fa fa-trash-o"></i>Enable</a> }
      </td>
    </tr>
    }
  </tbody>
</table>

$(document).ready(function() {
  table = $('#UserDetail').dataTable({
    ajax: {
      "url": finalTableUrl, //,
      "columns": [{
        "data": "Email"
      }, {
        "data": "FirstName"
      }, {
        "data": "LastName"
      }, {
        "data": "Gender"
      }, {
        "data": "DateOfBirth"
      }, {
        "data": "EmailConfirmed"
      }]
    },
    hideEmptyCols: true,
    "columnDefs": [{
      "defaultContent": "-",
      "targets": "_all"
    }],
    //"order": [[ 1, 'asc' ]],
    //dom: 'Bfrtip',
    buttons: [{
      extend: 'excelHtml5',
      text: '  Excel',
      className: 'btn btn-primary glyphicon glyphicon-list-alt',
      title: 'User Report',
      footer: true
    }, {
      extend: 'pdfHtml5',
      text: '  PDF',
      className: 'btn btn-primary glyphicon glyphicon-file',
      title: 'User Report'
    }, {
      extend: 'csvHtml5',
      text: '  CSV',
      className: 'btn btn-primary glyphicon glyphicon-save-file',
      title: 'User Report'
    }, {
      extend: 'copy',
      text: '  Copy',
      className: 'btn btn-primary glyphicon glyphicon-duplicate'
    }, {
      extend: 'print',
      text: '  Print',
      title: 'User Report',
      className: 'btn btn-primary glyphicon glyphicon-print',
      message: 'User Report'
    }],
    "pageLength": 50,
    "bDestroy": true //,
  });
});

Data:

{
  "data": [{
    "Id": "ca63-4328-92d8-881cdce841bd",
    "Email": "xxxx@fmail.com",
    "EmailConfirmed": false,
    "IsEnabled": true,
    "FirstName": "Ar",
    "LastName": "Mu",
    "DateOfBirth": null,
    "Gender": "Male"
  }, {
    "Id": "593e-44ca-9b46-7c2d50477daa",
    "Email": "ssss@gmail.com",
    "EmailConfirmed": true,
    "IsEnabled": true,
    "FirstName": "xxx",
    "LastName": "asassa",
    "DateOfBirth": null,
    "Gender": "Male"
  }, {
    "Id": "517d-4c0a-972c-b532a2321969",
    "Email": "qwwqwqqw@gmail.com",
    "EmailConfirmed": true,
    "IsEnabled": false,
    "FirstName": "qwqwqw",
    "LastName": "qwqw",
    "DateOfBirth": null,
    "Gender": "Male"
  }]
}

Answer 1

The error is caused by having the columns object within the ajax object.

Your call should read:

$(document).ready(function() {
  table = $('#UserDetail').dataTable({
    ajax: {
      "url": finalTableUrl, //,
    }, // <-- Close the ajax object here
    "columns": [{
        "data": "Email"
      }, {
        "data": "FirstName"
      }, {
        "data": "LastName"
      }, {
        "data": "Gender"
      }, {
        "data": "DateOfBirth"
      }, {
        "data": "EmailConfirmed"
      }], // <-- Clean up extra closing brace after this line
    hideEmptyCols: true,
    "columnDefs": [{
      "defaultContent": "-",
      "targets": "_all"
    }]
  });
});

This can be seen working here: https://jsfiddle.net/fuovznhe/2/

Also, you appear to be mixing your databindings somewhat - you've got a tbody element that is supposed to be loaded by the view model passed to the page, and then you're dynamically loading the content from your AJAX call - I'm assuming that the viewmodel is actually empty, otherwise you would be getting an error from DataTable when it tries to bind the data - so it's probably good to remove that from your markup if you've moved to the client side databinding.