时间戳

首页 > 解决方案 > 如何在数据表中显示 2 张图像？

php - 如何在数据表中显示 2 张图像？

问题描述

我想使用 Datatable 和 Laravel 5.7 在表格中显示 2 张图像。图像正在显示，但视图表并不好。

这是我的表格 html：

<div class="col-sm-4">
   <div class="row">
      <table id="tableData" class="table table-bordered table-striped">
         <thead>
             <tr style="background-color:#3896D6;">
                <th style="vertical-align: middle!important; text-align: center!important; color: white;" colspan="2">Image Data</th>
             </tr>                   
             <tr>
                 <th style="vertical-align: middle!important; text-align: center!important;">Image 1</th>
                 <th style="vertical-align: middle!important; text-align: center!important;">Image 2</th>
             </tr>
         </thead>
      </table>
   </div>
</div>

这就是我将图像渲染到表格的方式

$('#tableData').DataTable().destroy();
    $('#tableData').dataTable({
        paging: false,
        info : false,
        searching: false,
        ajax : {
            url : 'monitoring/getphoto/'+id,
            method : 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        },
        columns : [
            { 
                "render": function (data, type, row) {
                    if (row.photo_position == 1) {
                        return '<img width=100 height=100 src="'+ row.photo_url +'">';
                    }else{
                        return '';
                    }
                }
            },
            {
                "render": function (data, type, row) {
                    if (row.photo_position == 2) {
                        return '<img width=100 height=100 src="'+ row.photo_url +'">';
                    }else{
                        return '';
                    }
                }
            }
        ],
        columnDefs : [
            {
                "targets" : "_all",
                "className": "text-center",
            }
        ]
    });

这是表格中显示的图像：

在此处输入图像描述

表格视图不太好，所以我该如何解决这个问题？

标签： phplaravellaravel-5datatabledatatables

解决方案

<thead>with<th>仅用于标题。在您的“图像数据”的情况下。在该行之后，您需要关闭<thead>with</thead>并从 开始<tbody>。在<tbody>你使用<td>而不是<th>

所以你的代码看起来像这样：

 <div class="col-sm-4">
    <div class="row">
        <table id="tableData" class="table table-bordered table-striped">
            <thead>
                <tr style="background-color:#3896D6;">
                    <th style="vertical-align: middle!important; text-align: center!important; color: white;" colspan="2">Image Data</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="vertical-align: middle!important; text-align: center!important;">Image 1</td>
                </tr>
                <tr>
                    <td style="vertical-align: middle!important; text-align: center!important;">Image 2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

推荐阅读