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

Question

我有一個使用兩個Ajax調用來加載數據的數據表。我在這裏演示JSFiddle 我想從第一個Ajax調用所有關於回覆的數據，並將它們加載到父行中。 然後我試圖從第二個Ajax調用所有附件相關的答覆，通過回覆ID，所以我想要在每個父行（答覆ID和其他數據相關的答覆），我想子行中獲得有關這一特定（回覆ID）所有附件，[現在我使用的文件名加載附件]

---

所以表將加載的所有答覆，當用戶點擊第一個「td」打開子行，用戶必須只能看到與這個回覆相關的附件，而當用戶打開另一個子行時，會看到不同的附件，這些附件只與他點擊它的回覆有關「td」

---

我的問題是與子行，它不會加載任何東西，當我把固定的id在ajax調用時，它加載所有子行中的相同文件，但我不希望這樣，我想每個子行加載只有相關的附件（通過回覆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> 

這裏爲4天嘗試更好地瞭解如何在數據表和子行的工作後，我可以解決這個問題，之後我的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

最後，所以我想把我的解決方案放在這裏，或許我可以讓其他有同樣問題的人受益。 以及這裏的問題是使用格式函數中的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>