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": "[email protected]",
    "EmailConfirmed": false,
    "IsEnabled": true,
    "FirstName": "Ar",
    "LastName": "Mu",
    "DateOfBirth": null,
    "Gender": "Male"
  }, {
    "Id": "593e-44ca-9b46-7c2d50477daa",
    "Email": "[email protected]",
    "EmailConfirmed": true,
    "IsEnabled": true,
    "FirstName": "xxx",
    "LastName": "asassa",
    "DateOfBirth": null,
    "Gender": "Male"
  }, {
    "Id": "517d-4c0a-972c-b532a2321969",
    "Email": "[email protected]",
    "EmailConfirmed": true,
    "IsEnabled": false,
    "FirstName": "qwqwqw",
    "LastName": "qwqw",
    "DateOfBirth": null,
    "Gender": "Male"
  }]
}

should include your controller to question

Hien Nguyen
– Hien Nguyen

2019-06-19 08:16:40 +00:00
Commented Jun 19, 2019 at 8:16 — Hien Nguyen
– Hien Nguyen, Commented Jun 19, 2019 at 8:16
@HienNguyen included but I thought it doesnt impact

Arijit Mukherjee
– Arijit Mukherjee

2019-06-19 08:32:45 +00:00
Commented Jun 19, 2019 at 8:32 — Arijit Mukherjee
– Arijit Mukherjee, Commented Jun 19, 2019 at 8:32

Zhaph - Ben Duguid · Accepted Answer · 2019-06-19 09:32:59Z

2

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.

edited Jun 19, 2019 at 9:32

answered Jun 19, 2019 at 9:27

Zhaph - Ben Duguid

27k5 gold badges88 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

iamdlm Over a year ago

And he should remove <tbody> section, because it's mixing two sources (from ajax request and viewmodel).

Zhaph - Ben Duguid Over a year ago

True - I was getting a fairly obvious error message about that one from DataTables.

Arijit Mukherjee Over a year ago

ok Thanks, Let me try this, but if I remove the tBody is there any other way in DataTable to achieve this :

string classActiveStatus = (bool)item.IsEnabled ? item.EmailConfirmed ? "success" : "active" : "danger";                             <tr class="@classActiveStatus">

Zhaph - Ben Duguid Over a year ago

I guess it depends on why you're using DataTable to populate the data dynamically if you're already doing it through Razor - for example if you want to enable sorting/filtering etc. DataTable can work with an existing table.

Zhaph - Ben Duguid Over a year ago

@ArijitMukherjee The documentation on Row Details would be a good place to start - this has examples of adding features and functions to rows based on the data returned during the Draw event.

Collectives™ on Stack Overflow

DataTable columns values showing Only DefaultContent

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related