Displaying image on Datatable

Question

Hi guys i\'m using server side processing to read the database table and convert the records into Json file, and pass it to the database table to display data.

read

Answer 1

You can use the columns.render option to specify a callback function that can modify the data that is rendered in the column.

The callback function takes three parameters (four since 1.10.1). The first parameter is the original data for the cell (the data from the db), the second parameter is the call type (filter, display, type, or sort), and the third parameter is the full data source for the row. The function should return the string that should be rendered in the cell.

In your columns definition, add the render option to your imageUrl column definition:

{
    "data": "imageUrl",
    "render": function(data, type, row) {
        return '<img src="'+data+'" />';
    }
}

Documentation on the render option found here.

Answer 2

Here's my solution, hope it helps someone.

 {
      'targets': [15,16],
      'searchable': false,
      'orderable':false,
      'render': function (data, type, full, meta) {
      return '<img src="'+data+'" style="height:100px;width:100px;"/>';
                        }
  },

Answer 3

"columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return '<img src="'+data+'" style="width=300px;height=300px;" />';
                },
                "targets": 1 // column index 
             }

        ]