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调用-我假设viewmodel实际上是空的，否则当您尝试绑定数据时，您将从DataTable中收到错误-因此，如果您已将其移至客户端，则最好将其从标记中删除侧面数据绑定。

DataTable列值仅显示DefaultContent

1 个答案: