为什么我的 jquery 数据表在第一次尝试时显示数据，但在随后的尝试中不显示？

Question

我正在使用它来加载表，但是当我第一次加载它时它可以工作，即第一次请求，但在后续请求中它无法加载新数据。

我正在使用带有 jquery 数据表的 asp.net mvc。为什么它不起作用？

在控制台中抛出此错误。

我收到“无法读取未定义的属性‘重新加载’”

$('form').submit(function(e) {
    e.preventDefault();
    if (!$(this).valid()) {
        $("#tbodytblServicesReport").html("");
        return;
    } else {
        filltblServicesReport();
    }
});

function filltblServicesReport() {

    $('tfoot td#tdTotal').text("");
    var url = '@Url.Action("ServicesDetailedReportPartyWise")';
    var data = {
        FromDate: $("#FromDate").val(),
        ToDate: $("#ToDate").val(),
        PartyName: $("#PartyName").val()
    }
    $.post(url, data, function(response) {
        if (response.ReturnStatusJSON == true) {
            $("#tbodytblServicesReport").html("");
            var counter = 1;
            $.each(response.lstDetailedServicesReturned, function(i, val) {
                $("#tbodytblServicesReport").append($('<tr>').append($('<td>').html(i))
                    .append($('<td>').html((val.EntryDateTime === null || val.EntryDateTime === "") ? "N/A" : formatJSONDate(val.EntryDateTime)))
                    .append($('<td>').html(val.InvoiceNo))
                    .append($('<td>').html(val.CustomerName))
                    .append($('<td>').html(val.VehicleRegNo))
                    .append($('<td>').html(val.ServiceName))
                    .append($('<td>').html(val.PartyName))
                    .append($('<td>').html(val.ServicePrice))
                    .append($('<td>').html(val.Commission))
                )
                i++;
                $('tfoot td#tdTotal').text(val.TotalCost);
                $('tfoot td#tdTotalCommission').text(val.TotalCommission);
                $('tfoot td#tdCommissionValue').text("-" + val.TotalCommission);
                $('tfoot td#tdFinalTotal').text(val.TotalCostMinusTotalCommission);
                //$('tfoot td#tdTotalCostMinusCommissionMinusTotalOtherExpenses').text(val.TotalCostMinusCommissionMinusTotalOtherExpenses);
                counter = i;
            })

            if (counter <= 1) {
                $('tfoot td#tdTotal').text("");
                $('tfoot td#tdTotalCommission').text("");
                $('tfoot td#tdCommissionValue').text("");
                $('tfoot td#tdFinalTotal').text("");
                //$('tfoot td#tdTotalCostMinusCommissionMinusTotalOtherExpenses').text("");
                return;
            }

            $('#tblServicesReport').show();

            $('#tblServicesReport').DataTable.ajax.reload(null, false)({
                bPaginate: false,
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    {
                        extend: 'pdfHtml5',
                        footer: true,
                        title: 'Party Wise Report (' + $('#FromDate').val() + ' - ' + $('#ToDate').val() + ')',
                        customize: function(doc) {
                            doc.styles.title = {
                                color: 'gray',
                                fontSize: '15',
                                alignment: 'center'
                            }
                            doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                            doc.styles.tableHeader.fontSize = 10;
                            doc.styles.tableHeader.alignment = 'left';
                            doc.styles.tableHeader.color = 'white'
                        }
                    },
                    {
                        extend: 'print',
                        footer: true
                        //title: 'Sales Report'
                    }
                ]
            });
        } else {
            swal("Sorry !", "No Record Found", "error");
            $("#tbodytblServicesReport").html("");
        }
    });
}

Answer 1

表格的重新加载方法不起作用，因此有一种方法可以解决。

首先初始加载是正确的 然后对于之后的其他负载需要销毁数据表并清空行 所以我是怎么做到的 -

第一次创建数据表

$('#mytable').dataTable()

第二次：-

//ajax for delete row
    $.ajax({
                    url: url,
                    type: "POST",
                    data: { request },
                    cache: false,
                    success: function (data) {

                            //DESTROY datatable
                            $('#mytable').DataTable().destroy();

                            //remove table rows
                            $('#mytable tbody').empty();
                            $.ajax({
                                type: "GET",
                                url: "url",
                                "columnDefs": [
                            { className: "ques", "targets": [1] }
                                ],
                                success: function (response) {

                                    if (response.Status === 1) {
                                     //Create new table and get list
                                        $('#mytable').dataTable({
                                            "data": response.data,
                                            "initComplete": function (settings, json) {
                                                App.unblockUI('.questionslist');
                                            },
                                            columns: [{ "data": "Id" },
                                            { "data": "Question", "width": "50%" },

                                            { "data": null, "render": function (data, type, full) { return '<a class="btn btn-info btn-sm" href=/Home/EditQuestion/' + full.Id + '>' + 'Edit' + '</a>'; }, },
                                            { "data": null, "render": function (data, type, row) { return '<button type="button" class="btn btn-danger btn-sm" value="' + row.Id + '" id="delete">DELETE</button>' } }
                                            ],
                                            "pageLength": 10,
                                            "order": [[0, "desc"]],
                                        });
                                    } else {

                                        toastr.error(response.Message)
                                    }
                                },
                                failure: function (response) {
                                },
                                error: function (response) {

                                }
                            });
                        }
                        else {
                        }
                    },
                    error: function (ex) {
                    },
                })

对于那些不明白的人 这里的第一个 ajax 调用执行一个 DELETE 方法： - 从数据表中删除一行

如果 成功删除，它会破坏数据表并删除所有行

                    //DESTROY datatable
                    $('#mytable').DataTable().destroy();

                    //remove table rows
                    $('#mytable tbody').empty();

在那之后 最后的 ajax 调用再次获取表的所有数据（删除一个条目后），并将其加载到表中

^^^^ 在上面的 ajax 调用中，在销毁数据表后，它看起来像一个新表，因此它的工作方式与第一次工作时相似

如有疑问请回复

Answer 2

Datatable 有内置的 ajax，所以把你的表初始化成这样

var url = '@Url.Action("ServicesDetailedReportPartyWise")';
var data = {
    FromDate: $("#FromDate").val(),
    ToDate: $("#ToDate").val(),
    PartyName: $("#PartyName").val()
}
var myTable = $('#tblServicesReport').DataTable({ ajax: url });

您可以在所需事件上使用myTable.ajax.reload(); 重新加载

IMO，重构您的代码，以便更好地在结构创建和数据填充之间进行拆分，如我的示例中所述。