DataTable动态列渲染场景下使用Column.Render属性添加操作按钮咨询

问题背景 #

我正在开发一款动态DataTable，其数据源为动态生成的[n]列结构，举例来说，数据源可能包含4列或6列。相关方案说明可以预先定义并构建列定义变量，再将其传入初始化参数中实现动态列渲染。

现有实现代码如下：

HTML代码 #

<div class="data-table">        
    <table id="dataTable" class="table table-striped table-bordered" style="width:100%;"></table>    
</div>

动态列初始化脚本 #

<script>
    var dataToSend = {};
    var dataTable;
    dataToSend = {
        "regionId": @Model.RegionId
    }
    // 获取列定义
    var dtColumns = @Html.Raw(Json.Serialize(listOfDefintions));
    // DataTable初始化
    $(function () {
        dataTable = {
            dt: null,
            init: function () {
                dt = $("#dataTable").DataTable({
                    ajax: {
                        type: "GET",
                        url: "@Url.Action("GetDataForGrid", "Contact")",
                        data: function () {
                            return dataToSend;
                        },
                        datatype: "json",
                        dataSrc: ""
                    },
                    columns: dtColumns,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },
            refresh: function () {
                dt.ajax.reload();
            }
        }
        dataTable.init();
    });
</script>

上述代码可以正常根据数据源动态渲染列，目前的效果如下：

• 数据源：
• 渲染后的表格：

需求说明 #

需要在表格最后一列渲染编辑、删除操作按钮。列数固定的场景下，我会直接在columns配置中追加操作列的render配置实现效果，代码如下：

<script>
    var dataToSend = {};
    var contactDataTable;
    dataToSend = {
       "regionId": @Model.RegionId
    };
    $(function () {
        contactDataTable = {
            dt: null,
            init: function () {
                dt = $('#contact-data-table').DataTable({
                    ajax: {
                        type: "GET",
                        url: "@Url.Action("GetDataForGrid", "Contact")",
                        data: function () {
                            return dataToSend;
                        },
                        datatype: "json",
                        dataSrc: ""
                    },
                    columns: [
                        {
                            "title": "Forename",
                            "data": "forename",
                            "searchable": true,
                        },
                        {
                            "title": "Surname",
                            "data": "surname",
                            "searchable": true,
                        },
                        {
                            "title": "Email",
                            "data": "email",
                            "searchable": true
                        },
                        {
                            "title": "Status",
                            "data": "status",
                            "searchable": true
                        },
                        {
                            "title": "Role",
                            "data": "roleName",
                            "searchable": true
                        },
                        {
                            "title": "",
                            "data": "id",
                            "searchable": false,
                            "sortable": false,
                            "render": function (data, type, full, meta) {
                                var buffer = '<a href="@Url.Action("Edit","Contact")/' + data  + '" class="btn btn-sm btn-primary js-action"><i class="far fa-edit"></i></a>&nbsp;'
                                buffer += '<a href="@Url.Action("Delete", "Contact")/' + data + '" class="btn btn-sm btn-danger js-action"><i class="far fa-trash-alt"></i></a>';
                                return buffer;
                            }
                        }
                    ],
                    columnDefs: [
                        { "width": "15%", "targets": 0 },
                        { "width": "15%", "targets": 1 },
                        { "width": "20%", "targets": 2 },
                        { "width": "15%", "targets": 3 },
                        { "width": "15%", "targets": 4 },
                        { "width": "20%", "targets": 5 },
                    ],
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },
            refresh: function () {
                dt.ajax.reload();
            }
        }
</script>

现在需要在动态列定义的场景下实现相同效果。

解决方案 #

直接在后台返回的动态列定义数组末尾追加操作列配置即可，无需修改其他初始化逻辑：

1. 找到获取动态列定义的代码行：

var dtColumns = @Html.Raw(Json.Serialize(listOfDefintions));

2. 在该行后追加操作列配置：

dtColumns.push({
    "title": "",
    "data": "id",
    "searchable": false,
    "sortable": false,
    "width": "20%",
    "render": function (data, type, full, meta) {
        const editUrl = '@Url.Action("Edit","Contact")/' + data;
        const deleteUrl = '@Url.Action("Delete", "Contact")/' + data;
        let buffer = `<a href="${editUrl}" class="btn btn-sm btn-primary js-action"><i class="far fa-edit"></i></a>&nbsp;`;
        buffer += `<a href="${deleteUrl}" class="btn btn-sm btn-danger js-action"><i class="far fa-trash-alt"></i></a>`;
        return buffer;
    }
});

如果需要统一配置操作列样式，也可以通过columnDefs指定最后一列（targets为-1）的属性：

dt = $("#dataTable").DataTable({
    // 原有配置保持不变
    columnDefs: [
        { "width": "20%", "targets": -1 }
    ]
});

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