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>