Display image on datatable

Question

Hi guys, I am using server-side processing to read the database table and convert the records to a Json file, and transfer it to the database table to display the data.

read the database and convert it to 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 url of the image that I want to display 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" }
    });
 });

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

In the last column, it displays the URL of the image, but not the one I want, I want to display the image normally on datatable using the URL if possible.

Thanks in advance.

Answer 1

columns.render, , , .

( 1.10.1). - ( db), (, , ), - . , .

render imageUrl:

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

.

Answer 2

, , -.

 {
      '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 
             }

        ]