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

但这里仍有问题是firebug screenshot

enter image description here

谢谢

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

使用asp.net mvc数据的jquery数据表未加载

2 个答案: