javascript - 在数据表上显示图像

Question

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

读取数据库并转成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。

JavaScript 代码:

   $(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 在数据表上显示通常的图像。

Answer 1

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

回调函数采用三个参数(自 1.10.1 起为四个)。第一个参数是单元格的原始数据(来自数据库的数据)，第二个参数是调用类型(过滤器、显示、类型或排序)，第三个参数是行的完整数据源。该函数应返回应在单元格中呈现的字符串。

在您的列定义中，将 render 选项添加到您的 imageUrl 列定义:

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

找到有关渲染选项的文档 here .