How showing up data jpg in data render ?

How showing up data jpg in data render ?

setiawansetiawan Posts: 5Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

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

    Kevin

  • setiawansetiawan Posts: 5Questions: 1Answers: 0
    edited February 28

    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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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

  • setiawansetiawan Posts: 5Questions: 1Answers: 0

    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/

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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

  • setiawansetiawan Posts: 5Questions: 1Answers: 0

    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/

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin

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

    Allan

  • kthorngrenkthorngren Posts: 21,292Questions: 26Answers: 4,944

    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_chaosglimpsed_chaos Posts: 140Questions: 30Answers: 4
    edited March 14

    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

Sign In or Register to comment.