2016-09-26 5 views
1

2つのAjax呼び出しを使用してデータをロードするデータテーブルがあります。ここでデモに従っていたJSFiddle 最初のAjaxから返信に関するすべてのデータを呼び出し、親行にロードしようとしています。 それから、私は2番目のAjaxから返信に関連するすべての添付ファイルを返信しようとしていますので、各親行に入ります(返信IDと返信に関連する他のデータ)。ユーザーがクリックしたときにテーブルがすべての返信をロードします親テーブルのidに基づいて子テーブルのデータを取得します。datatable-jQueryの2つのajax呼び出しを使用します。


[今、私は添付ファイルをロードするためのファイル名を使用しているため]子列に、この特定の(応答ID)に関連するすべての添付ファイルを取得し、子供の行を開く最初の "td"は、この返信に関連する添付ファイルのみを表示し、別の子行を開くと、別の子行を表示すると、彼がクリックした返信のみに関連する別の添付ファイルが表示されます"td"


私の問題は子行にあり、何もロードせず、固定idをajax呼び出しに置くと、すべての子行に同じファイルがロードされますが、その必要はありません。関連する添付ファイルだけを読み込む子行(返信IDによる添付)

私は5日間試してみましたが、解決できませんでした。また、ネット上で同様の問題を見つけることができませんでした。 私はdatatableを使って何をしたいのですか?ここ

は私の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> 

答えて

2

は最後にしようとして4日後、私はどのようにデータテーブルと子行の作品をよりよく理解した後、問題を解決する可能性があるありますだから私はここに私の解決策を載せたいので、同じ問題を抱えている人に恩恵を与えるかもしれない。 よくある問題はここでは、返信IDを取得するためにフォーマット関数でforeachを使用している、それは間違っている、私は、フォーマット関数にセルをクリックした子行からの返信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> 
です
関連する問題