使用 ajax 数据在 onclick 上加载的 jQuery DataTables答案

【问题标题】：jQuery DataTables loaded on onclick with ajax data使用 ajax 数据在 onclick 上加载的 jQuery DataTables
【发布时间】：2015-10-29 19:14:29
【问题描述】：

我有一个使用 DataTables jquery 库的 MVC 5 应用程序。我以前使用过这个，但总是在页面加载时立即加载表格。目前，我希望页面加载并允许用户将文本添加到搜索字段中，调用 AJAX 函数，然后显示返回的数据。

我收到的错误是'Uncaught TypeError: Cannot read property 'nTable' of null' on page load。

到目前为止，我发现了一些错误：返回的数据过多以及预期返回的顺序错误。这些是固定的，但我仍然得到同样的错误。

我知道我的 AJAX 方法返回数据，并且我知道我的点击事件正在触发。

这是我的客户端代码，简要介绍如下：我有一个公共的 'sf' 变量来容纳数据表实例（.DataTable，而不是 .dataTable）。然后我设置表格，没有数据字段。当用户单击搜索按钮时，ajax 方法将触发，检索数据（使用 Fiddler 验证），并在成功方法中调用函数将这些行添加到表中。

<script>
var sf;

$(document).ready(function () {       
    SetupSalesForceTable();
});

function SetupSalesForceTable() {

    sf = $('#salesForceAccounts').DataTable(
        {
            "destroy": true
            , "processing": true
            , "columns": [
                { "data": "Id" },
                { "data": "AccountNumber" },
                { "data": "Name" }
            ]
        });
}

function LoadSalesForceSearchData() {
    var search = $("#salesForceSearch").val();

    $.ajax(
    {
        "type": "GET"
        , "data": { search: search }
        , "url": "@Url.Action(MyMethod, MyController)"
        , success: function (data) { AddRecordsToTable(data); }
        , error: function () { alert('there was an error! '); }
    });
}

function AddRecordsToTable(data) {

    sf.rows.add(data).draw();
    $("#salesForceAccounts").show();
} </script>

正如我所说，我之前使用过 DataTables，但所有内容都已放入页面加载中，并且运行良好。这一次，事情有点不同，我不确定我错过了什么。我是否缺少任何必需的部分，或者是否有任何错误配置？感谢您的帮助！

【问题讨论】：

此时，我无法显示数据，但我已经克服了错误。在我的 html 中，我没有正确创建表格。它需要包括 thead、tfoot 和 tbody 空元素。我完全忘记了这些部分。所以，这是固定的。现在我需要弄清楚为什么数据没有显示......

标签： ajax datatable datatables

【解决方案1】：

Arrrrg... 从另一个问题here 我询问/了解了 data 和 dataSrc，我意识到我单独的 ajax 调用创建了一个围绕我的数据的包装器，并且比我分配的更深一层。哎呀。

这就是我的 AJAX 控制器方法的作用（不，这些不是我使用的真实方法名称），我只返回一个对象集合。这行得通！

 [RequireAjax]
    [HttpGet]
    public ActionResult LoadSalesForceSearchTable(string search)
    {
        var model = this.MyRepo.MyMethod(search);

        var json = this.Json(model, JsonRequestBehavior.AllowGet);            

        return json;
    }

以下不适用于我的 DataTables 对象设置方式。最初，我这样做是为数据添加一个包装器，称为“数据”，这是我使用以前数据表的方式所需要的。因为我的数据比我分配的要深一级，所以我什么也没得到。

 [RequireAjax]
    [HttpGet]
    public ActionResult LoadSalesForceSearchTable(string search)
    {
        var model = this.MyRepo.MyMethod(search);

        var json = this.Json(new { data = model}, JsonRequestBehavior.AllowGet);

        return json;
    }

希望对您有所帮助！

【讨论】：