Displaying image on Datatable

问题:

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

 
id
                                 
Banner Id
                                 
Campaign Id
                                 
Banner Name
                                 
Width
                                 
Height
                                 
Image/Banner
                             
id
                                 
Banner Id
                                 
Campaign Id
                                 
Banner Name
                                 
Width
                                 
Height
                                 
Image/Banner
                             

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.

Thank you in advance.

回答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 '';     } } 

Documentation on the render option found here.

回答2:

Here's my solution, hope it helps someone.

 {       'targets': [15,16],       'searchable': false,       'orderable':false,       'render': function (data, type, full, meta) {       return '';                         }   }, 

回答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 '';                 },                 "targets": 1 // column index               }          ] 

文章来源: Displaying image on Datatable