基于列值控制DataTable中操作按钮的显示与隐藏

我有一个包含FOOD和OPERATIONS两列的DataTable：

• FOOD列展示菜单内容
• OPERATIONS列包含EDIT和DELETE两个操作按钮

需求：当FOOD列的值为"HAMBURGER"时，显示这两个按钮；否则隐藏按钮。

我尝试了如下jQuery代码，但条件逻辑的实现存在问题：

Menu = $('#tblMenu').DataTable({
        columns: [
            { "data": "FOOD", responsivePriority: 1, "searchable": true },
            {
                "data": null,
                render: function (data, type, row) {
                    btn = '<div class="d-flex">';
                    btn += '<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>';
                    btn += '<a class="btn btn-danger" id="deleteMenu" href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>';
                    
                    //Condition
                    if (data.find("FOOD") != "HAMBURGER") {
                        /*btn +=*/ $('a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>').hide();
                        $('a class="btn btn-danger"  href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>').hide();
                    } else {
                        $('a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>').show();
                        $('a class="btn btn-danger"  href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>').show();
                    }

                    btn += '</div>';
                    return btn;
                }, 
            }
        ]
    });

<table class="table align-middle table-bordered text-center w-100" style="font-size:75%; " id="tblMenu">
    <thead class="table-primary">
        <tr>
            <th class="align-middle">FOOD</th>
            <th class="align-middle">OPERATIONS</th>
        </tr>
    </thead>
</table>

你的代码存在两个核心问题：

1. data.find("FOOD")用法错误：data是当前行的数据源对象，直接通过data.FOOD或row.FOOD就能获取FOOD列的值，find()是jQuery用于DOM查找的方法，不能用来遍历对象属性。
2. 动态创建元素的hide()/show()无效：你创建的按钮还没被添加到DOM中，调用jQuery的hide()/show()不会对最终返回的HTML字符串产生任何影响。

修复方案（两种可选） #

方案1：根据条件决定是否生成按钮

直接在渲染时判断，只有当FOOD是"HAMBURGER"时才拼接按钮HTML：

Menu = $('#tblMenu').DataTable({
    columns: [
        { "data": "FOOD", responsivePriority: 1, "searchable": true },
        {
            "data": null,
            render: function (data, type, row) {
                let btn = '<div class="d-flex">';
                // 直接判断FOOD值
                if (row.FOOD === "HAMBURGER") {
                    btn += '<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>';
                    btn += '<a class="btn btn-danger" href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>';
                }
                btn += '</div>';
                return btn;
            }, 
        }
    ]
});

方案2：通过CSS类控制显示隐藏

先拼接所有按钮，再根据条件给容器添加隐藏类（适合需要保留占位的场景）：

Menu = $('#tblMenu').DataTable({
    columns: [
        { "data": "FOOD", responsivePriority: 1, "searchable": true },
        {
            "data": null,
            render: function (data, type, row) {
                // 先定义按钮HTML
                const editBtn = '<a class="btn btn-info" href="/editMenu?id=' + row.idOrder + '">EDIT</a>';
                const deleteBtn = '<a class="btn btn-danger" href="/deleteMenu?id=' + row.idOrder + '">DELETE</a>';
                // 根据条件添加隐藏类
                const containerClass = row.FOOD !== "HAMBURGER" ? "d-flex d-none" : "d-flex";
                return `<div class="${containerClass}">${editBtn}${deleteBtn}</div>`;
            }, 
        }
    ]
});

额外注意点 #

• 不要给多个按钮设置相同的id="deleteMenu"，ID必须唯一，可以改用类名或者动态生成唯一ID（比如id="deleteMenu-${row.idOrder}"）。
• 字符串拼接时注意引号转义，建议使用ES6模板字符串（反引号`）让代码更易读。

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