Show an image in a “Jquery Datatable Plugin” cell using “columns.render” callback

LazyPanda84

I'm trying to display an image in a cell using the suggested answer from this post: Displaying image on Datatable.

However, the first parameter of the callback (data) should receive the string with the url pointing to the image, but it is always undefined.

This is how I initialize the datatable (columnDefs contains the callback I was talking about):

    $().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);
    });

After an ajax call, I update data into the table, drawing it back again:

$('#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);
});

The third column (data[i].teamLogo) contains the correct url I want to use as src for the image (I'm sure about it because I used the developer console to check the correctness of the string).

This is html Markup:

<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>

Is there anything wrong with the callback I wrote? Should be "data" parameter populated with a different string, instead of 'teamLogo'?

I'm using the latest version of datatables (1.10.20) and Jquery (3.5.1).

kthorngren

You have

                t.row.add([
                    data[i].rank,
                    data[i].teamName,
                    data[i].teamLogo,
....
                    data[i].awayGoalsAgainst
                ]);

With row.add() it expects one row so you don't want the row in an array to look like this:

                t.row.add(
                    data[i].rank,
                    data[i].teamName,
                    data[i].teamLogo,
....
                    data[i].awayGoalsAgainst
                );

However you should be able to replace the for loop with one line using rows.add(), for example t.rows.add( data ).draw();.

Also it looks like you need to add the option columns.data to define your object based data.

Kevin

LazyPanda84

Excellent Kevin! Changing the definition of the options like this:

$().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);
});

and using

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

did the trick!
Thank you very much!