在 jQuery DataTables 中使用“稍后”变量答案

【问题标题】：Using "later" variable in jQuery DataTables在 jQuery DataTables 中使用“稍后”变量
【发布时间】：2019-06-15 07:32:14
【问题描述】：

我的 DataTables 配置是这样的：


(function ($) {
    "use strict";
$(document).ready(function () {

    $('#data-table-users').DataTable({
        "processing": true, 
        "serverSide": true, 
        "filter": true, 
        "orderMulti": false, 
        "ajax": {
            "url": "/Users/GetUsersData",
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs":
            [{
                "targets": [0],
                "visible": false,
                "searchable": false
            }],
        "columns": [
            .............................
            {

                "data": "Image",
                "orderable": false,
                "render": function (data, type, row, meta) {
                    var imgSrc;
                    if (data != null) {
                        imgSrc = '"data:image/jpeg;base64,' + atob(data) + '"';
                    }
                    else {
                        imgSrc = "/svg/" + "A" + ".svg";
                    }

                    return '<div><img class="small-img" src=' + imgSrc + '></div>';

                }
            },
            {
                "data": "UserName",
                "render": function (data, type, row, meta) {

                    return '<div class="positioned"> <div class="editable" data-name="userName" contenteditable="true">'
                        + data + '</div > <i class="fa fa-pencil pushright" aria-hidden="true"></i> </div>';
                }
            },
            {
                "data": "FirstName",
                "render": function (data, type, row, meta) {
                    if (data == null)
                        data = "";
                    return '<div class="positioned"> <div class="editable" data-name="userName" contenteditable="true">'
                        + data + '</div > <i class="fa fa-pencil pushright" aria-hidden="true"></i> </div>';
                }
            },
            ............................
        ],
        "order": [[8, "desc"]]

    });
});
})(jQuery);

对于我在渲染功能中的图像列：

else {
    imgSrc = "/svg/" + "A" + ".svg";
}

我想要的不是 imgSrc = "/svg/A.svg" 而是像这样基于 UserName 列构造它：

imgSrc = "/svg/" + userName[0].toUpperCase() + ".svg";

如何在不更改服务器端代码的情况下做到这一点？在我看来，DataTables 稍后会呈现 UserName 单元格，因此 Image 单元格已经呈现。渲染 UserName 以更改图像单元格内容时，是否可以以某种方式添加触发器？

我可以在整个表格被渲染后更改 Image 列中所有单元格的值，但不知何故我不喜欢这个想法，因为它可能看起来很难看。所以，请不要这样建议。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

刚刚收到。我可以使用 row 参数访问当前行的所有数据。

所以它只是：

imgSrc = "/svg/" + row['UserName'][0].toUpperCase() + ".svg";

【讨论】：