DataTable Предупреждение при добавлении новой строки - PullRequest
0 голосов
/ 11 марта 2020

Я получаю приведенное ниже сообщение об ошибке из DataTables, когда отправляю результаты из формы и пытаюсь добавить новую строку в таблицу данных после сохранения результатов.

Предупреждение DataTables: идентификатор таблицы = платежи - Запрошенный неизвестный параметр 'paymentTypes.name' для строки 9, столбец 2. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4

Вот моя таблица данных

   <!-- .table -->
        <table id="payments" class="table table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>Date Created</th>
                                                    <th>Created By</th>
                                                    <th>Payment Type</th>
                                                    <th>Reference Number</th>
                                                    <th>Comment</th>
                                                    <th>Amount</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table><!-- /.table -->

Вот начальная загрузка данных (Это загружается и работает нормально)

    var table2 = $("#payments").DataTable({
            ajax: {
                url: "/api/InvoicePayments/" + $('#InvoiceMaster_Id').val(),
                dataSrc: ""
            },
            columns: [
                {
                    data: "dateCreated"
                },
                {
                    data: "createdBy"
                },
                {
                    data: "paymentTypes.name"
                },
                {
                    data: "referenceNumber"
                },
                {
                    data: "comments"
                },
                {
                    data: "amount"
                },
                {
                    data: "id",
                    render: function (data) {
                        return "<button class='btn-link js-delete' data-paymentdetails-id=" + data + ">Delete</button>";
                    }
                }
           ]

        });

  //Delete button
        $("#payments").on("click", ".js-delete", function () {
            var button = $(this);
            bootbox.confirm("Are you sure you want to delete this line?", function (result) {
                if (result) {
                    $.ajax({
                        url: "/api/Payments/" + button.attr("data-paymentdetails-id"),
                        method: "DELETE",
                        success: function () {
                            table2.row(button.parents("tr")).remove().draw();
                        }
                    });
                }
            });
        });

Вот мой текущий код для добавления новой строки (не удается на paymentTypes.name). Когда я просматриваю responsesedata.paymentTypes.name в консоли, он отображает искомое значение, поэтому я знаю, что оно не равно нулю.

            $.ajax({
                url: "/api/Payments",
                type: "POST",
                data: data,
                success: function (respText) {
                    responsedata = respText;
                    console.log(responsedata);
                    console.log(responsedata.dateCreated);
                    console.log(responsedata.paymentTypes.name);
                    console.log(responsedata.referenceNumber);
                    console.log(responsedata.comments);
                    console.log(responsedata.amount);
                    var paymentsTable2 = $('#payments').DataTable();

                    paymentsTable2.row.add( {
                                        "dateCreated":   responsedata.dateCreated,
                                        "createdBy":   responsedata.createdBy,
                                        "paymentTypes.name": responsedata.paymentTypes.name,
                                        "referenceNumber": responsedata.referenceNumber,
                                        "comments":     responsedata.comments,
                                        "amount": responsedata.amount,
                                        "id":       responsedata.id
                    }).draw( false );

                    toastr.success("Payment successfully recorded.");

                },
                error: function () {
                    toastr.error("Something unexpected happened.");
                }
            });

enter image description here Строка действительно получает добавлено, но этот столбец пуст. См. Ниже

enter image description here

1 Ответ

0 голосов
/ 13 марта 2020

После нескольких часов исследований я нашел другой способ приспособиться к этому.

$('#payments').append('<tr><td>' + responsedata.dateCreated + '</td><td>' + responsedata.createdBy + '</td><td>' + responsedata.paymentTypes.name + '</td><td>' + responsedata.referenceNumber + '</td><td>' + responsedata.comments + '</td><td>' + responsedata.amount + '</td><td>' + "<button class='btn-link js-delete' data-paymentdetails-id=" + responsedata.id + ">Delete</button>" + '</td></tr>');
...