仅显示 DefaultContent 的 DataTable 列值

Question

所有表都没有错误绑定到 3 行，但没有显示数据，只有 defaultContent '-' 显示我尝试处理空大小写。

 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": [{
    "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

该错误是由columns 对象包含在ajax 对象中引起的。

你的电话应该是：

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

这可以在这里看到：https://jsfiddle.net/fuovznhe/2/

此外，您似乎在某种程度上混合了数据绑定 - 您有一个 tbody 元素，该元素应该由传递给页面的视图模型加载，然后您从 AJAX 动态加载内容调用 - 我假设视图模型实际上是空的，否则当它尝试绑定数据时你会从 DataTable 中收到错误 - 所以如果你已经移动到客户端数据绑定，最好从你的标记中删除它.