带有asp.net mvc数据的jquery数据表未加载

Question

您好，在我的项目中，我正在使用 jquery 数据表。我的问题是我尝试使用 ajax 请求加载表，但我失败了。经过几次尝试，请帮助我解决这个问题。

我的数据表初始化是

var responsiveHelperDatatableColReorder = undefined;
$('#tbl_datasource').dataTable({
    sDom: '<"top"i>rt<"bottom"flp><"clear">',
    iDisplayLength: -1,
    searching: false,
    ordering: false,
    scrollY: 300,
    scrollX: true,
    info: false,
    paging: false,
    "preDrawCallback": function () {
        // Initialize the responsive datatables helper once.
        if (!responsiveHelperDatatableColReorder) {
            responsiveHelperDatatableColReorder = new ResponsiveDatatablesHelper($('#tbl_datasource'), {
                tablet: 1024,
                phone: 480
            });
        }
    },
    "rowCallback": function (nRow) {
        responsiveHelperDatatableColReorder.createExpandIcon(nRow);
    },
    "drawCallback": function (oSettings) {
        responsiveHelperDatatableColReorder.respond();
    },
    ajax: {
        url : '../Home/DataSourceHealth',
        dataType: "json"
    },
    columns: [
        { "data": "providerName" },
        { "data": "fileName" },
        { "data": "status" },
        { "data": "lastRunTime" },
        { "data": "avgRecords" },
        { "data": "numberOfRecordes" },
        { "data": "numberOfErrorRecords" }
    ]
});

我在视图中使用 smartadmin 管理模板

<table id="tbl_datasource" class="table table-striped table-hover table-condensed" width="100%">
    <thead>
        <tr>
            <th data-class="expand">Name</th>
            <th data-hide="phone,tablet">Source File</th>
            <th data-hide="phone">Loading status</th>
            <th data-hide="phone,tablet">Last run time</th>
            <th data-hide="phone,tablet">Avg. records</th>
            <th data-hide="phone,tablet">No.of records</th>
            <th data-hide="phone,tablet">Deviation</th>
            <th data-hide="phone,tablet">Data status</th>
            <th data-hide="phone,tablet">Action</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

在我的控制器上，我以这种格式返回了 json 对象

[
  {
    "loadDetailId": 108,
    "loadDetailStatusId": 7,
    "providerName": "Marin",
    "status": "Complete File Process",
    "fileName": "SiSenseChryslerPAPCanadaByClientAccount_03042015_bk8heq3q70.csv",
    "numberOfRecordes": 633,
    "avgRecords": 633.00,
    "numberOfErrorRecords": 3,
    "lastRunTime": "2015-03-10T15:01:40.14"
  },
  {
    "loadDetailId": 109,
    "loadDetailStatusId": 7,
    "providerName": "Marin",
    "status": "Complete File Process",
    "fileName": "SiSenseCPAPDisplayCampaigns_03042015_nqh8w254o2.csv",
    "numberOfRecordes": 100003,
    "avgRecords": 100001.00,
    "numberOfErrorRecords": 3,
    "lastRunTime": "2015-03-10T15:01:42.283"
  }
]

在配置 jquery 数据表时我错过了什么？

更新

我发现最初的问题是数据结构应该是这样的

{
  "data": [
    {
      "loadDetailId": 108,
      "loadDetailStatusId": 7,
      "providerName": "Marin",
      "status": "Complete File Process",
      "fileName": "SiSenseChryslerPAPCanadaByClientAccount_03042015_bk8heq3q70.csv",
      "numberOfRecordes": 633,
      "avgRecords": 633.00,
      "numberOfErrorRecords": 3,
      "lastRunTime": "2015-03-10T15:01:40.14"
    },
    {
      "loadDetailId": 109,
      "loadDetailStatusId": 7,
      "providerName": "Marin",
      "status": "Complete File Process",
      "fileName": "SiSenseCPAPDisplayCampaigns_03042015_nqh8w254o2.csv",
      "numberOfRecordes": 100003,
      "avgRecords": 100001.00,
      "numberOfErrorRecords": 3,
      "lastRunTime": "2015-03-10T15:01:42.283"
    }
 ]
}

但这里仍有问题是萤火虫截图

谢谢

Answer 1

这里有几件事可能会出错。首先，如果您返回的 JSON 未命名为 data，那么您必须更改数据表初始化以向其添加 datasrc = "" 属性，如下所示：

ajax: {
    url : '../Home/DataSourceHealth',
    dataType: "json",
    dataSrc: ""
}

这使得数据表在对象数组中读取，例如在您的案例中返回的对象。否则，它会查找名为data 的对象，如果找不到，则假定没有数据。以下是相关文档：https://datatables.net/reference/option/ajax.dataSrc

您的数据表的第二个问题是您的标题比您通过列读取的数据多：

9 个标题：

<thead>
    <tr>
        <th data-class="expand">Name</th>
        <th data-hide="phone,tablet">Source File</th>
        <th data-hide="phone">Loading status</th>
        <th data-hide="phone,tablet">Last run time</th>
        <th data-hide="phone,tablet">Avg. records</th>
        <th data-hide="phone,tablet">No.of records</th>
        <th data-hide="phone,tablet">Deviation</th>
        <th data-hide="phone,tablet">Data status</th>
        <th data-hide="phone,tablet">Action</th>
    </tr>
</thead>

定义了 7 个数据列：

columns: [
    { "data": "providerName" },
    { "data": "fileName" },
    { "data": "status" },
    { "data": "lastRunTime" },
    { "data": "avgRecords" },
    { "data": "numberOfRecordes" },
    { "data": "numberOfErrorRecords" }
]

表头和数据列的数量需要完全一样，否则不起作用。

Answer 2

尝试使用 chrome 或 IE 进行调试，看看你的请求出现了什么错误。

也试试这个

ajax: {
url : '/Home/DataSourceHealth',
dataType: "json"
},