基于父行上的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>