Question

我正在努力使用jQuery Datatables和一些jQuery。我有一个引导按钮，单击该按钮时会使用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]是您在呈现按钮之前检查的待处理和已激活的行值。

查看此jsfiddle以获取有效工作示例

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

1 个答案: