使用數據表中的兩個Ajax調用基於父行上的ID獲取子行中的數據-jQuery

Question

我有一個使用兩個Ajax調用在其中加載數據的數據表。 我正在這里的JSFiddle進行演示，我試圖從第一個Ajax調用中獲取有關答復的所有數據，並將其加載到父行中。 然后我試圖從第二個Ajax調用中獲取與答復相關的所有附件（按答復ID），所以我想進入每個父行（答復ID和與答復相關的其他數據），我想獲取在子行中，與此特定（回復ID）相關的所有附件，[目前，我正在使用fileName加載附件]

---

因此該表將加載所有答復，並且當用戶單擊第一個“ td”以打開子行時，用戶必須僅看到與此答復相關的附件，並且當用戶打開另一個子行時，將看到不同的附件。附件，僅與他單擊其“ td”的答復有關

---

我的問題是子行，它不加載任何內容，當我在ajax調用中添加固定ID時，它在所有子行中加載相同的文件，但是我不希望那樣，我希望每個子行都加載僅相關附件（按回復ID進行附件）

我花了5天的時間嘗試，但無法解決，也沒有在網絡中找到任何類似的問題可以提供幫助。 使用數據表可以實現我想要的東西嗎？

這是我的HTML代碼

<table id="replyTable" class="display table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Attachments</th>
            <th>Reply ID</th>
            <th>Ticket ID</th>
            <th>Message</th>
            <th>Transaction Status</th>
            <th>Created Date</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

這是我的JS代碼

 <script>   
        $(document).ready(function () {

            var TicketID = $("#txtTicketID").val();
            var table = $('#replyTable').DataTable({
                ajax: {
                    type: "GET",
                    url: "/api/TicketsReplies/GetTicketsRepliesByTicketID/" + TicketID,
                    dataSrc: "",
                    datatype: 'json',
                    cache: false,
                },
                columns: [
                    {
                        className:      "details-control",
                        orderable:      false,
                        defaultContent: ""

                    },
                    {
                        className: "replyIdClass",
                        data: "id",

                    },
                    { data: "ticketsId" },
                    { data: "message" },
                    { data: "transactionStatus.nameEnglish" },
                    { data: "createdDate" }
                ],
                "order": [[1, 'asc']]

            });

            // Add event listener for opening and closing details
            $('#replyTable').on('click', 'td.details-control', function () {

                var tr = $(this).closest('tr');
                var row = $('#replyTable').DataTable().row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    format(row.child);
                    tr.addClass('shown');
                }
            });

            function format(callback) {
                var IdValue = $('#replyTable').find('.replyIdClass').text();
                $('.replyIdClass').each(function (i) {

                    var repId = $(this).text();

                    $.ajax({
                        url: '/api/TicketAttachmentApi/GetRepliesAttachments/' + repId,
                        dataType: "json",
                        complete: function (response) {
                            var data = JSON.parse(response.responseText);
                            console.log(data);
                            var tbody = '';

                            $.each(data, function (i, d) {
                                tbody += '<tr><td>' + d.fileName + '</td><td>' + d.id + '</td></tr>';
                            });
                            console.log('<table>' + tbody + '</table>');
                            callback($('<table>' + tbody + '</table>')).show();
                        },
                        error: function () {
                            $('#output').html('Bummer: there was an error!');
                        }
                    });
                }); 
            } 

        });

    </script>

Answer 1

最后，經過4天的嘗試，在更好地了解了數據表和子行的工作方式之后，我可以解決該問題，因此我想將解決方案放在這里，這樣我也許可以使遇到相同問題的其他人受益。 好了，這里的問題是使用foreach格式函數來獲取回復ID，這是錯誤的，我必須將單擊單元格所在的子行中的回復ID傳遞給格式函數，並僅檢索其中回復ID =的附件我點擊的單元格中的回復ID

這是我的解決方案，它工作正常。 這是HTML

<input type="hidden" value='@ViewContext.RouteData.Values["id"]' id="txtTicketID" />

<table id="replyTable" class="display table-bordered table-hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Attachments</th>
                <th>Reply ID</th>
                <th>Message</th>
                <th>Transaction Status</th>
                <th>Created Date</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

這是Ajax和jQuery代碼

<script>
    $(document).ready(function () {

        var TicketID = $("#txtTicketID").val();
        // Get Replies From API by TicketID
        var table = $('#replyTable').DataTable({
            ajax: {
                type: "GET",
                url: "/api/TicketsReplies/GetTicketsRepliesByTicketID/" + TicketID,
                dataSrc: "",
                datatype: 'json',
                cache: false,
            },
            columns: [
                {
                    className: "details-control",
                    orderable: false,
                    defaultContent: ""
                },
                {
                    className: "replyIdClass",
                    data: "id",
                },
                {
                    data: "message",

                },
                { data: "transactionStatus.nameEnglish" },
                { data: "createdDate" }
            ],
            "order": [[1, 'asc']]

        });

        // Add event listener for opening and closing details
        $('#replyTable').on('click', 'td.details-control', function () {

            var id = $(this).closest("tr").find('.replyIdClass').text();
            var tr = $(this).closest('tr');
            var row = $('#replyTable').DataTable().row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
                // Open this row
                format(row.child, id); // here pass the reply id to function format
                tr.addClass('shown');
            }
        });

        function format(callback, vRid) {

            var TicketID = $("#txtTicketID").val();

            var repId = $(this).text();
            $.ajax({
                type: "GET",
                url: "/api/TicketAttachmentApi/GetRepliesAttachments/" + vRid,
                dataType: "json",
                cache: false,
                complete: function (response) {
                    var data = JSON.parse(response.responseText);
                    console.log(data);
                    var tbody = "";

                    $.each(data, function (i, d) {
                        tbody += "<tr><td><a href='/Attachments/Tickets/" + TicketID + "/Replies/"
                          + vRid + "/" + d.fileName + "' target='_blank'>" + d.fileName + "</a></td></tr>";
                    });
                    console.log("<table>" + tbody + "</table>");
                    callback($("<table>" + tbody + "</table>")).show();
                },
                error: function () {
                    $('#output').html('Bummer: there was an error!');
                }
            });
        } //-- end format (callback)

    });

</script>