C# 未加载asp.net mvc数据的jquery datatable

嗨，在我的项目中，我正在使用jquerydatatable。我的问题是，我试图使用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" }
    ]
});

配置jquery datatable时遗漏了什么

已更新

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

{
  "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屏幕截图

---

谢谢

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

也试试这个

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

---

你有几件事情可能会出问题。首先，如果返回的JSON未命名为

data

，则必须更改datatables初始化以向其添加

datasrc=”“

属性，如下所示：

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

这使得数据表在对象数组中读取，就像在您的案例中返回的一样。否则，它将查找名为

data

的对象，如果找不到该对象，它将假定没有数据。以下是这方面的文档：

datatables的第二个问题是，标题多于通过列读取的数据：

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>

---

标题和数据列的数量必须完全相同，否则将无法工作。

在firefox上启用firebug运行您的站点，并检查控制台。。扔了什么东西？另外，在返回json的操作方法上添加一个断点。如果调用正确，请运行fiddler并检查调用的响应。。一切看起来都很好？。我不熟悉jquery datatable函数，但如果您查看我的注释，它们可能会给您提供线索或帮助您改进问题，以便其他人能够提供帮助这不是问题。。我正在将数据正确地传送到客户端。表呈现时出现问题。谢谢

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

<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>

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