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

如果我理解正确——那是你想根据前 2 行值在最后显示一个按钮——你可以使用 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 数据表和不同类型的按钮

jQuery datatable and different types of buttons

javascript

datatable

jquery

twitter-bootstrap