Displaying image on Datatable

Question

I am 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 database and convert it into json:

code:

 Route::get('banner/list/banners/json/{id}', function ()
   {
      $banner = DB::table('banner_creatives')->where('Id','=','53')->get();

      $recordsTotal = count($banner);

      $data['draw'] = 1;
      $data['recordsTotal'] = $recordsTotal;
      $data['recordsFiltered'] = $recordsTotal;

      $data['data'] = $banner;

      return Response::json($data);
   });

Json output:

  {"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"id":1,"bId":26,"cId":53,"bName":"32_32_53.jpeg","storageType":"url","width":32,"height":32,"weight":1,"imageURL":"localhost:8000\\\/banner\\\/view\\\/32_32_53.jpeg","clickURL":"","created_at":"2015-01-26 12:32:28","updated_at":"2015-01-26 12:32:28","deleted_at":null}]}

As you can see on this json, I have the image Url that I want to display it on the table.

JavaScript code:

   $(document).ready(function() {
    var table = $('#banner').DataTable( {
    "processing": true,
    "serverSide": false,
    "ajax": "banners/json/53",
    "columns": [
        { "data": "id" },
        { "data": "bannerId" },
        { "data": "campaignId" },
        { "data": "bannerName" },
        { "data": "width" },
        { "data": "height" },
        { "data": "imageUrl" }
    });
 });

Datatable code:

 <table id="banner" class="display table table-striped table-bordered table-hover dataTable no-footer" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>Banner Id</th>
                                <th>Campaign Id</th>
                                <th>Banner Name</th>
                                <th>Width</th>
                                <th>Height</th>
                                <th>Image/Banner</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>id</th>
                                <th>Banner Id</th>
                                <th>Campaign Id</th>
                                <th>Banner Name</th>
                                <th>Width</th>
                                <th>Height</th>
                                <th>Image/Banner</th>
                            </tr>
                        </tfoot>
                    </table>

On the last column it displaying the image URL but is not what i want, i want to display the usually image on the datatable using the URL, if it possible.

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.