为什么我的jQuery的数据表中的数据显示，在第一次尝试，但没有为后续的尝试？(Why my jqu

我用这来加载表，但是当我加载它的第一次即第一个请求，但在随后的请求时，它无法加载新的数据它的工作原理。

我使用asp.net mvc的使用jQuery的数据表。 为什么不工作？

抛出在控制台此错误。

我得到“无法读取属性的‘刷新’未定义”

$('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:

表具有内置的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，refactore你的代码做结构创建和数据之间更好的分流与逻辑填充在我的例子说明。

Answer 2:

重装表将无法正常工作的方法，所以有周围的你如何做到这一点的方式。

第一初始负载是正确的那么对于其它负载之后，需要摧毁数据表，我是如何做到的所以这里空行 -

创建第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调用，摧毁它看起来就像一个新表DataTable之后，因此它同样会工作，因为它的工作是第一次

如果恢复有任何疑问

文章来源: Why my jquery datatable shows data at first attempt but not for the subsequent attempt?