How showing up data jpg in data render ?

setiawan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

See this example. If this doesn't help then please provide more details.

Kevin

setiawan

I've tried it and it still doesn't work

<!--JavaScript dasar untuk menampilkan datatables-->
<script type="text/javascript">
    $(document).ready(function(){
        $('#example').DataTable({
        dom: 'lfrBtip',
        "paging": true,
        "autoWidth": true,
        "columnDefs": [
            {
                title:'images',
                targets:12,
                render: function(data, type, row, meta){
                if(type == 'display'){
                 // data = '<img src='+data+' width="40" height="70">';
                  data = '<img src="/upload/" width="50" height="35" >';
                  data = '<a href=' + data + '' + data + '</a>';
                }
                return data;
              }
            },
        {
        targets:11,
           render: DataTable.render.number( null, null, 2, 'Rp' )  
        },
        {
        title:'Receipt',
        targets:9,
        render:function(data,type,row,meta){
              if(type==='display'){
                  data = '<a href="' + data + '" target="_blank">Download</a>';
              }
              return data;
          }  
        },
        {
        targets: 8,
        render: $.fn.dataTable.render.percentBar('round','#fff', '#FF9CAB', '#2dbe25', '#FF9CAB', 0, 'solid') // #FF0033 merah tua, #FF9CAB meah muda, fff putih, 000 hitam, #2dbe25 hijau muda
        },
        {
        targets:5,
            data: 'age',
            render: function (data, type, row, meta) {
                    return '<a target="_blank" href="https://google.com">' + data + '</a>';
            }
        },
        {
        targets:10,
            data:'status',
            render: function (data, type, row) {
                var btn ='';
                if(data=="active") 
                {
                    btn += '<button class="btn btn-success">'+data+'</button>';
                } else {
                    btn += '<button class="btn btn-danger">'+data+'</button>';
                }
                return btn;
            }
        },
        {
        targets:3,
            data: 'position',
            render: function (data, type, row, meta) {
                if (type === 'display') {
                    let link = 'https://maps.app.goo.gl/JbykpUfb7ZK38etn8';
 
                    if (data[0] < 'H') {
                        link = 'https://stonebont.com';
                    }
                    else if (data[0] < 'S') {
                        link = 'https://detik.com';
                    }
 
                    return '<a target="_blank" href="' + link + '">' + data + '</a>';
                }
 
                return data;
            }
        },
        {
            targets:4,
            data: 'office',
            render: function (data, type, row, meta) {
                if (type === 'display') {
                    let country = '';
 
                    switch (data) {
                        case 'Argentina':
                            country = 'ar';
                            break;
                        case 'Edinburgh':
                            country = '_Scotland';
                            break;
                        case 'London':
                            country = '_England';
                            break;
                        case 'New York':
                        case 'San Francisco':
                            country = 'us';
                            break;
                        case 'Sydney':
                            country = 'au';
                            break;
                        case 'Tokyo':
                            country = 'jp';
                            break;
                    }
 
                    return '<span class="flag ' + country + '"></span> ' + data;
                }
 
                return data;
            }
         }
        ]
    });
  });
</script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

That is a lot of code to look at to try and figure out what is not working without details of the exact issue. The best thing is to post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Make sure to provide details of what exactly is not working and what you are expecting to happen.

Kevin

kthorngren

Here is a simple example displaying an image in the Position column:
https://live.datatables.net/bemaketa/45/edit

Possibly you need to make sure the path to your image is correct.

Kevin

setiawan

thanks for your help, its work for image from url. . My goal is to showing images each field from database.

this is my demo link :
https://wise.stonebont.com/DataTables-DataRender/

kthorngren

Thanks for the example but I'm not sure what images you want to show. Please provide more details about what you want shown as images and how you want them to look.

Kevin

setiawan

I want to display employee photos, but in another way using dataRender in datatables.
This is the link that I have successfully displayed, but not by dataRendering in datatables. https://wise.stonebont.com/CRUD-YT-Image/

allan

What is dataRender? It isn't an option for DataTables initialisation.

Allan

kthorngren

Very nice. You could do something like this:

  //initialize datatables
  let table = new DataTable("#myTable", {
    columns: [
      {
        data: 'id',
      },
      {
        data: 'image',
        render: function (data, type, row) {
          if (type === 'display') {
            return '<img src="uploads/' + data + '" style="width:50px;height:50px;border:2px solid gray;border-radius:8px;object-fit:cover">';
          }
          return data;
        }
      },
      {
        data: 'name',
      },
      {
        data: 'position',
      },
      {
        data: 'email',
      },
      {
        data: 'office',
      },
      {
        data: 'gender',
      },
      {
        data: null,
        render: function (data, type, row) {
          if (type === 'display') {
            return '<Button type="button" class="btn editBtn" value="' + row.id + '"><i class="fa-solid fa-pen-to-square fa-xl"></i></Button>' +
              '<Button type="button" class="btn deleteBtn" value="' + row.id + '"><i class="fa-solid fa-trash fa-xl"></i></Button>' +
              '<input type="hidden" class="delete_image" value="' + row.image + '">';
          }
          return data;
        }        
      },
    ]
  });


  // function to fetch data from database
  function fetchData() {
    $.ajax({
      url: "server.php?action=fetchData",
      type: "POST",
      dataType: "json",
      success: function(response) {
        var data = response.data;
        table.clear().draw();
        $.each(data, function(index, value) {
          table.rows.add( data ).draw(false);
        })
      }
    })
  }

It uses columns.render to render the images and buttons. The loop in the success function is removed. It uses rows.add() to add all rows at once. I didn't test this code so it may need some adjustments if you choose to try it.

Kevin

glimpsed_chaos

Assuming you are reading your image (stored as a blob) from your database, you could convert it to a base64 string and pass that into your dataTable dataset. Using the render function you could render similar to this example: https://live.datatables.net/siliqile/2/edit