如何为DataTables按钮添加显示隐藏条件（基于Ajax响应）

客户端已从API获取Ajax响应，需求为：当响应数据不为空时显示“Not Found”按钮，数据为空时隐藏该按钮。现有代码如下，请问如何修改以实现该功能？

success: function(response){
    var result;
    
    if (response.data != null){
        result = "dataNotNull";
    } else {
        result = "dataNull";
    }

    loadFunc(result);
}

function loadFunc(result){
    $('#myTable').DataTable({
        buttons: [
            {
                text: 'Missmatch',
                titleAttr: 'Download in Excel',
                action: function ( e, dt, node, config ) {
                    func_expMissMatch();
                }
            },
            {
                text: 'Not Found',
                titleAttr: 'Download in Excel',
                action: function ( e, dt, node, config ) {
                    func_expNotFound();
                }
            }
        ]
    });
}

可以通过两种方式实现需求：

方式一：动态构建按钮数组 #

根据传入的result值，动态决定是否将“Not Found”按钮加入按钮列表：

success: function(response){
    var result;
    // 补充判断空数组的情况，避免response.data为空数组时误判
    if (response.data != null && response.data.length > 0){
        result = "dataNotNull";
    } else {
        result = "dataNull";
    }

    loadFunc(result);
}

function loadFunc(result){
    // 定义固定显示的Missmatch按钮
    let buttons = [
        {
            text: 'Missmatch',
            titleAttr: 'Download in Excel',
            action: function ( e, dt, node, config ) {
                func_expMissMatch();
            }
        }
    ];
    // 数据不为空时，添加Not Found按钮
    if (result === "dataNotNull") {
        buttons.push({
            text: 'Not Found',
            titleAttr: 'Download in Excel',
            action: function ( e, dt, node, config ) {
                func_expNotFound();
            }
        });
    }
    $('#myTable').DataTable({
        buttons: buttons
    });
}

方式二：通过visible属性控制显示 #

给“Not Found”按钮添加visible属性，根据result值设置是否可见：

success: function(response){
    var result;
    // 补充判断空数组的情况，确保逻辑准确
    if (response.data != null && response.data.length > 0){
        result = "dataNotNull";
    } else {
        result = "dataNull";
    }

    loadFunc(result);
}

function loadFunc(result){
    $('#myTable').DataTable({
        buttons: [
            {
                text: 'Missmatch',
                titleAttr: 'Download in Excel',
                action: function ( e, dt, node, config ) {
                    func_expMissMatch();
                }
            },
            {
                text: 'Not Found',
                titleAttr: 'Download in Excel',
                action: function ( e, dt, node, config ) {
                    func_expNotFound();
                },
                // 数据不为空时显示该按钮，否则隐藏
                visible: result === "dataNotNull"
            }
        ]
    });
}

关键补充说明 #

原代码仅判断response.data != null，但如果接口返回空数组[]，该条件会成立，却不符合“数据不为空”的实际需求。建议补充response.data.length > 0的判断，确保逻辑与需求一致。

内容的提问来源于stack exchange，提问作者mastersuse