如何在JavaScript中仅为DataTable特定行显示按钮？

需求场景 #

DataTable最后一列包含两个按钮，要求仅当该行Type列值为2时显示第二个按钮（带铅笔图标的按钮），值为1或3时隐藏该按钮，而非整列统一显示/隐藏。

解决方案 #

利用DataTable列渲染函数的row参数（该参数包含当前行的完整数据），通过判断row.Type的值，动态控制第二个按钮的hidden属性：

修改后的关键代码 #

将最后一列的render函数修改为以下内容：

{
    "data": "entityId",
    "render": function (data, type, row, meta) {
        var sendTime = moment(Date()).format('YYYY-MM-DD HH:mm');
        // 根据row.Type判断是否隐藏第二个按钮
        const secondButtonHidden = row.Type !== 2 ? 'hidden' : '';
        return `
        <div class="ui icon buttons fluid" style="width:70%;">
            <button class="firstButton"><i class="icon check"></i></button>
            <button class="secondButton" ${secondButtonHidden}><i class="icon pencil"></i></button>
        </div>  
        `;
    }                                   
}

完整修改后的代码 #

async function loadDesc(mainID) {
    let errDatatableId = '#desc-table';
    if ($.fn.dataTable.isDataTable(errDatatableId)) {
        $(errDatatableId).DataTable().destroy();
    }
    $(errDatatableId).DataTable({
        data: await getDescription(mainID),
        columns: [
            {
                "data": "Description",
                "render": function (data) {
                    return data;
                }
            },
            {
                "data": "User",
                "render": function (data) {
                    return data;
                }
            },
            {
                "data": "Date",
                "render": function (data) {
                    return moment(data).format('YYYY-MM-DD HH:mm');
                }
            },
            {
                "data": "Type",
                "render": function (data) {
                    switch (data) {
                        case 1:
                            return "Done";
                        case 2:
                            return "Modify";
                        case 3:
                            return "Over";
                        default:
                            return "Error";
                    }
                }
            },
            {
                "data": "ID",
                "render": function (data) {
                    return data;
                }
            },
            {
                "data": "entityId",
                "render": function (data, type, row, meta) {
                    var sendTime = moment(Date()).format('YYYY-MM-DD HH:mm');
                    const secondButtonHidden = row.Type !== 2 ? 'hidden' : '';
                    return `
                    <div class="ui icon buttons fluid" style="width:70%;">
                        <button class="firstButton"><i class="icon check"></i></button>
                        <button class="secondButton" ${secondButtonHidden}><i class="icon pencil"></i></button>
                    </div>  
                    `;
                }                                   
            }
        ],
        columnDefs: [{
            className: 'dt-nowrap',
            targets: [0, 2]
        }],
        lengthMenu: [
            [30, 100, 300],
            [30, 100, 300]
        ],
        order: [0, 'asc']
    });
}

原理说明 #

• DataTable的列render函数提供了row参数，可直接获取当前行的所有字段值，这里我们用row.Type拿到该行的类型值。
• 通过三元运算判断：如果row.Type不等于2，就给第二个按钮加上hidden属性，否则不添加，实现按行控制按钮显示状态。

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