1
私はこれに対する解決策を見つけようとしていますが、私が試したことは何も動作していないようです。誰かが素晴らしいアイデアを持っている場合：jqueryデータテーブルは、要求されたページ/行のみをレンダリングします。ダイナミックに作成されたボタンに到達する必要があります
私は、各行の最後のtdのボタンをレンダリングして、その行がビューされたことを確認します。私はいくつかのサーバサイドのものをやっていますが、色を変えたり、このボタンに他のスタイリングを加えたり、ツールチップを追加するなど、これまでのところうまくいきました。しかし、DTのデフォルトのinitloadは200行であるため、表示されているとおりにそれらをすべて却下したいと思うかもしれないので、私は「すべてを肯定応答する」ボタンをもう1つ持っています。これは私の問題が始まる場所です。私は現在表示している行を操作するようにしか見えません。テーブル上のページを変更すると、「事前確認済み」ボタンが表示されます。
すべてのデータ（thタグを数えていない）は、私がjavascript配列に格納してinitのテーブルに渡しているsignalRクライアントから来ます。
これはボタンのためのJavaScript（すべてを認める）をクリックしている：これは私がボタンを持っているhtmlです
$('#eventTable thead').on('click', 'button', function (e) {
var buttons = document.getElementsByClassName('ackButton');
for (var i = 0; i < buttons.length; i++) {
console.log(buttons[i]);
var ackButton = buttons[i];
$(ackButton).addClass('acknowledgedEvent');
$(ackButton).html("<i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged");
$(ackButton).addClass('acknowledged');
$(ackButton).css({ 'background-color': 'gainsboro', 'cursor': 'not-allowed', 'padding-left': '5px', 'padding-right': '5px' });
$(ackButton).on('click', function (e) {
e.stopimmediatepropagation();
});
}
});
：
<thead>
<tr>
<th>Time</th>
<th>Date</th>
<th>Component</th>
<th>Severity Level</th>
<th>Type</th>
<th>Message</th>
<th>Actions<button id="ackAll" class="btn btn-danger btn-sm pull-right">All</button></th>
</tr>
</thead>
、これがint DTの列のレンダリングであります（「行動」欄を表す）：
{
name: 'action',
"data": null,
"render": function(row, type, val, meta) {
if (row[7] === "false") {
columndata =
"<button class='btn pull-right ackButton' style='border-radius:24px;background-color: rgb(91, 192, 222);color:white;padding-left:10px;padding-right:10px;'><i class='fa fa-eye-slash' aria-hidden='true' style='margin-right: 7px;'></i>acknowledge</button><a class='ackInfoLink ackInfoLink-hidden pull-right' href='#ackCommentModal' style='visibility:hidden;' data-toggle='modal'><i class='fa fa-info-circle text-info fa-lg' aria-hidden='true'></i></a>";
} else if (row[7] === "true") {
if (row[10] === "" || row[10] == null) {
columndata =
"<button class='btn acknowledgedEvent pull-right' style='border-radius:24px;background-color: gainsboro;color:white; cursor: not-allowed; padding-left:5px;padding-right:5px;'><i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged</button><a href='#ackCommentModal' class='ackInfoLink pull-right' style='visibility:hidden;' data-toggle='modal'><i class='fa fa-info-circle text-info fa-lg' aria-hidden='true'></i></a>";
} else {
columndata =
"<button class='btn acknowledgedEvent pull-right' style='border-radius:24px;background-color: gainsboro;color:white; cursor: not-allowed; padding-left:5px;padding-right:5px;'><i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged</button><a href='#ackCommentModal' class='ackInfoLink pull-right' data-toggle='modal'><i class='fa fa-info-circle text-info fa-lg' aria-hidden='true'></i></a>";
}
$('.acknowledgedEvent').tooltip({
html: true,
title: '<strong><em>checked by </strong>' + row[9] + ',<br /> ' + row[8] + '</em>',
placement: 'bottom'
});
}
return columndata;
},
"defaultContent": columndata,
responsivePriority: 3
}