使用ajax数据加载到onclick上的jQuery数据表

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

我收到的错误是“UncaughtTypeError:无法读取页面加载时null的属性“nTable”

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

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

以下是我的客户端代码，并简要介绍： 我有一个公共“sf”变量来存放datatable实例（.datatable，而不是.datatable）。然后我设置了表，没有数据字段。当用户单击search按钮时，ajax方法激发、检索数据（通过Fiddler验证），并在success方法中调用函数将这些行添加到表中

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

var-sf；
$（文档）.ready（函数（）{
SetupSalesForceTable（）；
});
函数SetupSalesForceTable（）{
sf=$（“#salesForceAccounts”）.DataTable(
{
“毁灭”：真的吗
，“处理”：真
，“列”：[
{“数据”：“Id”}，
{“数据”：“帐号”}，
{“数据”：“名称”}
]
});
}
函数LoadSalesForceSearchData（）{
var search=$（“#salesForceSearch”）.val（）；
$.ajax(
{
“类型”：“获取”
，“数据”：{search:search}
，“url”：“@url.Action（MyMethod，MyController）”
，成功：函数（数据）{AddRecordsToTable（数据）；}
，错误：函数（）{alert（'发生错误！'）；}
});
}
函数AddRecordsToTable（数据）{
sf.rows.add（data.draw（）；
$（“#salesForceAccounts”）.show（）；
} 

---

正如我所说，我以前使用过DataTables，但是所有内容都被放入页面加载中，并且工作正常。这一次，情况有点不同，我不确定我错过了什么。我是否缺少任何必需的部件，或者配置不正确？谢谢你的帮助

arrrg。。。从我询问/了解数据和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;
    }

---

希望这对你有帮助

arrrg。。。从我询问/了解数据和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;
    }

---

希望这对你有帮助

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