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>

在最后一列显示图片网址但不是我想要的，我想在可能的情况下使用网址在数据表上显示常用图片。

Answer 1

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

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

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

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

有关渲染选项的文档here。

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 
             }

        ]

在Datatable上显示图像

3 个答案: