Question

我想使用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",
            }
        ]
    });

这是表中显示的图像：

表格视图不是很好，所以我该如何解决呢？

Answer 1

带有<thead>的

<th>仅用于标题。对于您的“图像数据”。在该行之后，您需要使用<thead>关闭</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>

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

1 个答案: