使用“columns.render”回调在“Jquery Datatable Plugin”单元格中显示图像答案

【问题标题】：Show an image in a "Jquery Datatable Plugin" cell using "columns.render" callback使用“columns.render”回调在“Jquery Datatable Plugin”单元格中显示图像
【发布时间】：2020-05-11 08:18:10
【问题描述】：

我正在尝试使用以下帖子中的建议答案在单元格中显示图像：Displaying image on Datatable。

但是，回调的第一个参数（数据）应该接收到带有指向图片的url的字符串，但它总是undefined。

这就是我初始化数据表的方式（columnDefs 包含我正在谈论的回调）：

$().ready(function () {
    var opt = {
        columnDefs: [{
                "targets": 2,
                "data": 'teamLogo',
                "render": function (data, type, row, meta) {
                    return '<img src="' + data + '" alt="' + data + '"height="16" width="16"/>';
                }
            }],
        info: false,
        order: [[0, 'asc']],
        paging: false,
        responsive: true,
        searching: false
    };
    $('#dataTable').DataTable(opt);
});

在 ajax 调用之后，我将数据更新到表中，然后再次将其拉回：

$('#cmbSeasons').change(function () {
    var leagueId = parseInt($('#cmbLeagues').val().toString());
    var seasonYear = parseInt($('#cmbSeasons').val().toString());
    var settings = {
        url: '/Standing/Read/Standings',
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        data: { leagueId: leagueId, seasonYear: seasonYear },
        success: function (data) {
            var t = $('#dataTable').DataTable();
            t.clear();
            for (var i = 0; i < data.length; i++) {
                t.row.add([
                    data[i].rank,
                    data[i].teamName,
                    data[i].teamLogo,
                    data[i].points,
                    data[i].allPlayed,
                    data[i].allWin,
                    data[i].allDraw,
                    data[i].allLose,
                    data[i].allGoalsFor,
                    data[i].allGoalsAgainst,
                    data[i].homePlayed,
                    data[i].homeWin,
                    data[i].homeDraw,
                    data[i].homeLose,
                    data[i].homeGoalsFor,
                    data[i].homeGoalsAgainst,
                    data[i].awayPlayed,
                    data[i].awayWin,
                    data[i].awayDraw,
                    data[i].awayLose,
                    data[i].awayGoalsFor,
                    data[i].awayGoalsAgainst
                ]);
            }
            t.draw();
        },
        error: function (result) { alert('error ' + result.status + ': ' + result.responseText); }
    };
    $.ajax(settings);
});

第三列 (data[i].teamLogo) 包含我想用作图像 src 的正确 url（我确定这一点，因为我使用开发者控制台检查了字符串的正确性）。

这是 html 标记：

<table id="dataTable" class="text-center">
    <thead class="text-capitalize">
        <tr>
            <th class="all">Rank</th>
            <th class="all">Team</th>
            <th class="all">Logo</th>
            <th class="all">Pts</th>
            <th class="all">Pl</th>
            <th class="all">W</th>
            <th class="all">D</th>
            <th class="all">L</th>
            <th class="all">GF</th>
            <th class="all">GA</th>
            <th class="all">HPl</th>
            <th class="all">HW</th>
            <th class="all">HD</th>
            <th class="all">HL</th>
            <th class="all">HGF</th>
            <th class="all">HGA</th>
            <th class="all">APl</th>
            <th class="all">AW</th>
            <th class="all">AD</th>
            <th class="all">AL</th>
            <th class="all">AGF</th>
            <th class="all">AGA</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

我写的回调有什么问题吗？应该用不同的字符串填充“数据”参数，而不是“teamLogo”？

我正在使用最新版本的数据表 (1.10.20) 和 Jquery (3.5.1)。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

return '<img src="' + data + '" alt="' + data + '"height="16" width="16"/>';

改为使用 Img 对象返回 https://www.w3schools.com/jsref/dom_obj_image.asp

【讨论】：

我不确定我是否理解您要告诉我的内容，但无论如何我认为如果我们没有从回调中获得正确的 url，我们将无法使用这两种解决方案.

【解决方案2】：

以这种方式更改选项的定义：

$().ready(function () {
    let opt: DataTables.Settings = {
        columns: [
            { "data": "rank" },
            { "data": "teamName" },
            { "data": "teamLogo" },
            { "data": "points" },
            { "data": "allPlayed" },
            { "data": "allWin" },
            { "data": "allDraw" },
            { "data": "allLose" },
            { "data": "allGoalsFor" },
            { "data": "allGoalsAgainst" },
            { "data": "homePlayed" },
            { "data": "homeWin" },
            { "data": "homeDraw" },
            { "data": "homeLose" },
            { "data": "homeGoalsFor" },
            { "data": "homeGoalsAgainst" },
            { "data": "awayPlayed" },
            { "data": "awayWin" },
            { "data": "awayDraw" },
            { "data": "awayLose" },
            { "data": "awayGoalsFor" },
            { "data": "awayGoalsAgainst" }
        ],
        columnDefs:
            [{
                "targets": 2,
                "data": 'teamLogo',
                "render": function (data, type, row, meta) {
                    return '<img src="' + data + '" alt="' + data + '"height="16" width="16"/>';
                }
            }],
        info: false,
        order: [[0, 'asc']],
        paging: false,
        responsive: true,
        searching: false
    }
    $('#dataTable').DataTable(opt);
});

并像这样简化 for 循环：

t.rows.add( data ).draw();

成功了！

看来我必须定义数据列才能使回调正常工作。

【讨论】：