jquery datatable仅呈现请求的页面/行。需要达到一个动态创建的按钮

时间:2017-01-26 09:57:42

标签: datatables-1.10

我一直试图为此寻找解决方案,但我尝试过的任何事情似乎都无法解决。如果有人有任何想法会很棒:)

我为每行的最后一个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
        }

1 个答案:

答案 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();
            });
        });
    });
});