dimanche 10 février 2019

How to display 2 images in datatable?

I want to display 2 images in a table using Datatable and Laravel 5.7. The images are showing, but the view table is not good.

This is my html for table:

<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>

This how i render the image to the table

$('#tableData').DataTable().destroy();
    $('#tableData').dataTable({
        paging: false,
        info : false,
        searching: false,
        ajax : {
            url : 'monitoring/getphoto/'+id,
            method : 'GET',
            headers: {
                'X-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",
            }
        ]
    });

and this is the image showing in table:

enter image description here

The table view is not so good, so how do i can fix this?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire