Javascript 在数据表上显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28152698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying image on Datatable
提问by Simphiwe Innocent
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:
读取数据库并将其转换为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 output:
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 you can see on this json i have the image Url that i want to display it on the table.
正如你在这个 json 上看到的，我有我想在桌子上显示它的图像 URL。
JavaScript code:
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" }
});
});
Datatable code:
数据表代码：
<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>
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.
在最后一列它显示图像 URL 但不是我想要的，如果可能的话，我想使用 URL 在数据表上显示通常的图像。
回答by patricus
You can use the columns.renderoption to specify a callback function that can modify the data that is rendered in the column.
您可以使用该columns.render选项指定可以修改列中呈现的数据的回调函数。
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.
回调函数采用三个参数（自 1.10.1 起为四个）。第一个参数是单元格的原始数据（来自数据库的数据），第二个参数是调用类型（过滤器、显示、类型或排序），第三个参数是行的完整数据源。该函数应返回应在单元格中呈现的字符串。
In your columns definition, add the renderoption to your imageUrlcolumn definition:
在您的列定义中，将render选项添加到您的imageUrl列定义中：
{
"data": "imageUrl",
"render": function(data, type, row) {
return '<img src="'+data+'" />';
}
}
Documentation on the render option found here.
有关渲染选项的文档可在此处找到。
回答by cookiesncream
Here's my solution, hope it helps someone.
这是我的解决方案，希望它可以帮助某人。
{
'targets': [15,16],
'searchable': false,
'orderable':false,
'render': function (data, type, full, meta) {
return '<img src="'+data+'" style="height:100px;width:100px;"/>';
}
},
回答by Ahmad
"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
}
]
