Add Image in Datatables as per status

Question

I walk around here with Datatables and wanted to add in a img type of state. If the value is 0 puts an image and is 1 puts another image on Row.

Answer 1

Since you have a data set in the attribute data on startup of your datatable columns, you can use the attribute render to modify the way the plugin will render each column.

In this attribute, you can specify a function where you can define exactly which value will be mapped to which value.

Consider the example (taken from the documentation):

$('#example').dataTable( {
  "columnDefs": [ {
    "targets": 4,
    "data": "description",
    "render": function ( data, type, full, meta ) {
      return type === 'display' && data.length > 40 ?
        '<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' :
        data;
    }
  } ]
} );

Note that in this example there is only one column, but the same applies to a array column.

The function to transform the numbers 0 and 1 in an image could be something like:

function (data, type, full, meta) {
    var img = data == 0 ? 'desativado.jpg' : 'ativado.jpg';
    return type === 'display' ? '<img src="'+img+'">' : data;
}

Note also the comparison type === 'display'. This causes the image to be returned for display, but the original data is used for sorting, filter, etc. To change the value used in a search, for example, you can compare the value of type === 'filter'.

Finally, there is a related response in Soen which may be useful for consultation. There you find the following example:

personTable = $("#person-table").DataTable({
    order: [1, "desc"],
    "autoWidth": false,
    ajax: {
        url: uri,
        dataSrc: "",
    },
    "columns": [
    { "data": "FirstName", "title": "Name" },
    { "data": "Address", "title": "Address" },
    { "data": "IsActive", "title": "Active" }
    ],
    "columnDefs": [
        {
            "render": function (data, type, row) {
                return row.FirstName + " " + row.LastName;
            },
            "targets": 1
        },
        {
            "render": function (data, type, row) {
                return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>';
            },
            "targets": 2
        }
    ]
});

It’s almost the same thing, only here using the Bootstrap icons instead of tags <img>.

Answer 2

Yes it worked in full

"columnDefs": [ {
                "targets": 6,
                "data": "RESOLVIDO",
                "render": function (data, type) {
                var img = data == 0 ? 'img/close.jpg' : 'img/ok.jpg';
                return type === 'display' ? '<img src="'+img+'">' : data;
            }