creating dynamic table using jquery i want to append model values inside a model

Question

contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(reportCriteria),
            success: function (response) {
                console.log(response);
                if (response.reportResult != null) {
                    for (var i = 0 ; i < response.reportResult.length; i++) {
                        var data = "<tr>" +
                            "<td class='reportTbl'>" + moment(new Date(parseInt(response.reportResult[i].InvoiceDate.substr(6))).toLocaleDateString()).format('YYYY-MMMM-DD') + "</td>" +
                             "<td class='reportTbl'>" + response.reportResult[i].InvoiceNumber + "</td>" +
                             "<td class='reportTbl'>" + response.reportResult[i].TotalValueWithVAT + "</td>" +
                             "<td class='reportTbl'>" + response.reportResult[i].**PartialPayments.ChequeNumber** + "</td>" +
                            "</tr>";
                        $('#completedPaymentReportTbl tbody').after(data);
                    }
                }
            }

"PartialPayments" is the inner model how can i append the data

score 1 · Answer 1 · answered Jan 01 '19 at 10:13

After messing with a JQuery sandbox I found that $('#completedPaymentReportTbl').append(data); should work for you. As reported in Appending rows to table, Jquery 1.4+ will automatically work out that you have a tbody there and know to append the rows inside the tbody.

I have two suggestions with things that may help prevent this bug and/or future bugs:

Try and introduce c# variables in your model or static variables for things like table names. Instead of typing #completedPaymentReportTbl, you'd type something like '@completedPaymentReportTableId' (example is for Razor templates). This will keep your table HTML and your JQuery "in sync".
Instead of sending back the information of your model and constructing the row in your javascript, render the row on the server side and send back the HTML of the row. This ensures that when you change the row structure, all the rows will be consistent.

creating dynamic table using jquery i want to append model values inside a model

1 Answers1