我一直试图为此寻找解决方案,但我尝试过的任何事情似乎都无法解决。如果有人有任何想法会很棒:)
我为每行的最后一个td渲染一个按钮,以确认该行已被查看。点击后我会做一些服务器端的东西,但也改变颜色和做一些其他样式到这个按钮,添加工具提示等等,到目前为止一切正常。但是我有另一个按钮来确认全部",因为DT的默认初始化是200行,你可能只想将它们全部视为已查看。这是我的问题开始的地方,我似乎只能操纵我当前正在查看的行。如果我在桌面上更改了"预先确认的"按钮出现。
所有数据(不包括th-tags)都来自signalR客户端,我将其存储在javascript数组中并在init上传递给表。
这是按钮的javascript(全部确认)点击:
$('#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();
});
}
});
这是我有按钮的html:
<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上的列渲染中(代表&#34; action&#34;列):
{
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
}
答案 0 :(得分:0)
似乎问题是我没有使用迭代元素的内置方法,因为我使用普通的javascript来收集按钮的html集合。
此代码正在运行:
$('#eventTable thead').on('click', 'button', function (e) {
table.rows().nodes().each(function(tr) {
$(tr).find(".ackButton").each(function () {
$(this).html("<i class='fa fa-eye' aria-hidden='true' style='margin-right: 7px;'></i>acknowledged");
$(this).addClass('acknowledgedEvent');
$(this).css({ 'background-color': 'gainsboro', 'cursor': 'not-allowed', 'padding-left': '5px', 'padding-right': '5px' });
$(this).on('click', function (e) {
e.stopimmediatepropagation();
});
});
});
});