ajax调用成功未绑定在数据表中答案

【问题标题】：ajax call success not binding in datatableajax调用成功未绑定在数据表中
【发布时间】：2021-04-21 09:53:37
【问题描述】：

我有 ajax 调用成功将数据绑定到表，但是当我想将数据表应用到我的表时，它显示如下图而不是绑定数据：

这是我的代码

<script>

    $.ajax({
        type: "POST",
        url: "/Reports/Pendings/",
        contentType: "application/json; charset=utf-8",
        cache: false,
        traditional: true,
        dataType: "json",
        processData: true,
        "xhrFields": {
            "withCredentials": true
        },
        success: function (data) {
            for (var i = 1; i < data.length; i++) {
                // Replaced key based access(.Key) by index access([1])
                var row = $('<tr><td>' + data[i][0] + '</td><td>' + data[i][1] + '</td><td>' + data[i][2] + '</td><td>' + data[i][3] + '</td><td>' + data[i][4] + '</td><td>' + data[i][5] + '</td><td>' + data[i][6] + '</td><td>' + data[i][7] + '</td></tr>');
                $('#table').append(row);
               

            }

            },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error: ' + textStatus + ' - ' + errorThrown);
        }
        });
  

</script>
<script>

    $('#table').DataTable();

</script>

【问题讨论】：

您是否应该在该发布请求中发送一些数据？如果您的问题是服务器端的，而您只显示客户端，我们无能为力
是的，我必须这样做，而且我的数据很好，只是我想将它们绑定到数据表，它们在普通表中显示很好，看看第一行。
您没有在请求中设置任何 Post 数据
我的数据是从 API 检查返回的 json 数据链接stackoverflow.com/questions/67160234/…

标签： c# json ajax datatables asp.net-core-mvc

【解决方案1】：

您的 ajax 调用上没有 data 属性，因此您不可能在此请求中向服务器提交任何内容。

您的数据应包括来自表单字段等的值。

    // Put your data here.
    let postData = { ... };
    $.ajax({
        type: "POST",
        url: "/Reports/Pendings/",
        contentType: "application/json; charset=utf-8",
        cache: false,
        traditional: true,
        dataType: "json",
        processData: true,
        data: postData, // Include your postData here.
        "xhrFields": {
            "withCredentials": true
        },
        success: function (data) {
            for (var i = 1; i < data.length; i++) {
                // Replaced key based access(.Key) by index access([1])
                var row = $('<tr><td>' + data[i][0] + '</td><td>' + data[i][1] + '</td><td>' + data[i][2] + '</td><td>' + data[i][3] + '</td><td>' + data[i][4] + '</td><td>' + data[i][5] + '</td><td>' + data[i][6] + '</td><td>' + data[i][7] + '</td></tr>');
                $('#table').append(row);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error: ' + textStatus + ' - ' + errorThrown);
        }
    });

【讨论】：

亲爱的我的数据是从 API 中返回的，请检查此链接 stackoverflow.com/questions/67160234/…
我的问题只是被提取到数据表而不是普通表。
您仍需要将其从 ajax 调用移至服务器，然后才能将其放入数据库。因此，在我发布的代码中，将 postData 替换为您从 api 获得的任何内容

【解决方案2】：

需要在ajax成功回调函数中初始化数据表，因为ajax默认是异步的。

$.ajax({
    type: "POST",
    url: "/Reports/Pendings/",
    contentType: "application/json; charset=utf-8",
    cache: false,
    traditional: true,
    dataType: "json",
    processData: true,
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            var row = $('<tr><td>' + data[i][0] + '</td><td>' + data[i][1] + '</td><td>' + data[i][2] + '</td><td>' + data[i][3] + '</td><td>' + data[i][4] + '</td><td>' + data[i][5] + '</td><td>' + data[i][6] + '</td><td>' + data[i][7] + '</td></tr>');

            $('#myTable').append(row);
        }

        $("#myTable").dataTable();            //init here
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert('Error: ' + textStatus + ' - ' + errorThrown);
    }
});

CDN：

<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />

【讨论】：

它给出的错误如下 TypeError: $(...).DataTable is not a function at Object.success
你添加了jquery.dataTables.min.js reference