javascript - jQuery 数据表和不同类型的按钮

Question

我正在努力使用 jQuery 数据表和一些 jQuery。我有一个 Bootstrap 按钮，单击该按钮时使用 data-target 属性打开特定模式:

<button type='button' id='Table' class='btn btn-success' data-toggle='modal' data-target='#ModalDeactivate'>Active</button>

目前，我只是将按钮放入数据表的 defaultContent 中。这会将数据表中的所有按钮变成绿色的成功按钮，单击时会启动模式，这很好。

但是，我有两个 sName 数据字段 Pending 和 Activated，我想这样做，以便如果 Activated > 设置为 1 那么我使用上面描述的按钮，如果 Pending 设置为 1 那么我使用:

<button type='button' id='Table' class='btn btn-warning' data-toggle='modal' data-target='#ModalActivate'>Pending</button>

请注意按钮class 和data-target 已更改。如何才能实现这一目标？ documentation表明您可以使用数据字段(在我的例子中，目前设置为 null)

$(document).ready(function () {
    $('#example').dataTable({
        "bServerSide": true,
        "sAjaxSource": "Data/AjaxHandler",
        "aoColumns": [
                        { "sName": "Pending" },
                        { "sName": "Activated" },
                        {
                            "sName": "Activate/Deactivate",
                            "targets": -1,
                            "data": null,
                            "defaultContent": "<button type='button' id='Table' class='btn btn-success' data-toggle='modal' data-target='#ModalDeactivate'>Active</button>"
                        }
                    ]
    });
});

Answer 1

如果我理解正确 - 也就是说您想根据前两行值在最后显示一个按钮 - 您可以使用 render为此:

{
"targets": -1,
"data": null,
"render": function ( data, type, full) {
        if(full[0] == '1'){
            return "<button type='button' id='Table' class='btn btn-success' data-toggle='modal' data-target='#ModalDeactivate'>Active</button>";
        }
        if(full[1] == '1'){
            return "<button type='button' id='Table' class='btn btn-warning' data-toggle='modal' data-target='#ModalDeactivate'>Pending</button>";
        }
    }
}

full[1] 和 full[2] 是您在渲染按钮之前检查的 Pending 和 Activated 行值。

检查这个jsfiddle一个工作示例