在Datatable上显示图像 [英] Displaying image on Datatable

问题描述

大家好我正在使用服务器端处理来读取数据库表并将记录转换为Json文件，并将其传递给数据库表以显示数据。

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.

读取数据库并将其转换为json
代码：

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输出：

  {"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你可以在这个json上看到我有想要在桌面上显示它的图像Url。

as you can see on this json i have the image Url that i want to display it on the table.

JavaScript代码：

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" }
    });
 });

数据表代码：

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

在最后一列显示图片网址但不是我想要的，我想显示通常使用URL在数据表上的图像，如果可能的话。

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.

推荐答案

您可以使用列。 render 选项，用于指定可以修改列中呈现的数据的回调函数。

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

回调函数有三个参数（自从4个1.10.1）。第一个参数是单元格的原始数据（来自db的数据），第二个参数是调用类型（过滤器，显示，类型或排序），第三个参数是行的完整数据源。该函数应返回应在单元格中呈现的字符串。

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.

在列定义中，添加 render 您的 imageUrl 列定义的选项：

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

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

找到渲染选项的文档这里。

这篇关于在Datatable上显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！