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

问题描述

我是使用服务器端处理读取数据库表并将记录转换成Json文件，传递给数据库表显示数据.

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.

读取数据库并转换成json:

Read database and convert it into json:

代码:

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

正如你在这个 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 但不是我想要的，如果可能，我想使用 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.

推荐答案

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

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

回调函数接受三个参数(自 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+'" />';
    }
}

在此处找到有关渲染选项的文档.

Documentation on the render option found here.

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