时间戳

首页 > 解决方案 > 仅显示 DefaultContent 的 DataTable 列值

jquery - 仅显示 DefaultContent 的 DataTable 列值

问题描述

所有表都没有错误绑定到 3 行，但数据没有显示，只有 defaultContent'-'显示我试图处理 null 情况。

 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"
  }]
}

标签： jqueryhtmlasp.net-mvcdatatable

解决方案

该错误是由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 中收到错误 - 因此，如果您已移至客户端数据绑定，则最好将其从标记中删除。

推荐阅读