1

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

leotato008
  • 57
  • 7

2 Answers2

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

use an Img object to return instead https://www.w3schools.com/jsref/dom_obj_image.asp

MSzucs
  • 178
  • 1
  • 10
  • I'm not sure I understand what you're trying to tell me, but anyway I think that if we don't get the correct url from the callback we will not be able to use neither solution. – leotato008 May 11 '20 at 08:49
0

Changing the definition of the options this way:

$().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 simplifying the for loop like this:

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

did the trick!

It seemes that I had to define the data columns for the callback to work properly.

leotato008
  • 57
  • 7