How to display image in column;

andras2 · May 2022

Hi there,

Can somebody explain me how to display images in a column. I have checked the examples but could not understand (by lacking of jquery experience). I would like to render images based on the url of the image.

I have checked these, but I did not find image related examples (or flags in the examples came serverside).
https://datatables.net/examples/basic_init/data_rendering.html
https://datatables.net/reference/option/columns.render
https://datatables.net/manual/data/renderers#Functions

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

kthorngren · May 2022

Are you able to display the image based on the URL outside of Datatables? Can you provide us an example of what you want to render? Please provide a simple test case showing an example of what you are trying to render. It doesn't need to be in a table or Datatables.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

andras2 · June 2022

Hi there,

I would like to render an image based on the URL of the image file displayed in the column.

colin · June 2022

This example should help, it's showing different styles of rendering, including images,

Colin

andras2 · June 2022

Thank you,

I tried similar solutions but only a picure icon shows up in the list. Could you have a look at my code?

$(document).ready(function() {  
    var table = $('#example').DataTable( {
        select: true,
        stateSave: true,
        //ajax: '/api/staff',
        rowId: 'id',
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]],
        "ajax": "data_project.txt",
        "columns": [
            { "data": "select" },    
            { "data": "id" },
            { "data": "title" },
            { "data": "description" },
            { "data": "cost" },
            { "data": "start_date" },
            { "data": "end_date" },
            { "data": "image_url" ,
              "render": function ( data) {
              return '<img src="C:/Users/An/Desktop/witney-buttercross.jpg" width="40px">';}
            }
        ]
    } );

kthorngren · June 2022

I don't thin you will be able to access a local file this way. Please see this Stack Overflow thread for a discussion about accessing a local file with the img element.

Kevin

andras2 · June 2022

Hi,

The problme was sorted by using relative URLs. It shows the images now but it seems started blinking once AJAX refreshes the database (json file). Can you help me how to stop the blinking effect?

kthorngren · June 2022

Please post a link to your page or a test case replicating the issue so we can see how this update is working to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

andras2 · June 2022

Please find code below;

<!DOCTYPE HTML>

<html>
<head>
  <title>Untitled</title>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<link rel="stylesheet" type="text/css" href="/Bootstrap/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<script src="eel.js"></script>

<style>
    .nav-item{color:red ;}
</style>

<script>    
$(document).ready(function() {  
    var table = $('#example').DataTable( {
        select: true,
        stateSave: true,
        //ajax: '/api/staff',
        rowId: 'id',
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]],
        "ajax": "data_project.txt",
        "columns": [
            { "data": "select" },    
            { "data": "id" },
            { "data": "title" },
            { "data": "description" },
            { "data": "cost" },
            { "data": "start_date" },
            { "data": "end_date" },
            { "data": "image_url" ,
            //   "render": function ( data) {return "<img src='imgs/witney-buttercross.jpg' width='80px'>";}
            },
            { "data": "folder1" },

        ]
    } );   
    //// Hover effect
    $('#example tbody').on( 'mouseover', 'td', function () {} );
    ////
    $('#example tbody').on('click', 'tr', function () {
    var table = $('#example').DataTable();
    var data = table.row( this ).data();
    $("input#project_title").val(data.title);
    $("textarea#project_description").val(data.description);
    $("textarea#project_cost").val(data.cost);
    $("input#project_date_start").val(data.start_date);
    $("input#project_date_end").val(data.end_date);
    var firstItem = document.getElementById('div_id');
    firstItem.innerHTML = data.id;
});
    ///
    setInterval( function () {
        var rows = table.rows({selected: true});
        table.ajax.reload( 
            function () {rows.select()}, false );}, 
            2000 );
});
</script>
<script>
    function db_project_add_new() {
        eel.project_add_new()
    }
</script>
<script>
function db_project_del_record() {
    //var id = this.id;
    table = $('#example').DataTable(); 
    var ids = table.rows( { selected: true } ).ids().toArray();
    eel.project_delete_records(ids)
}
</script>
<script>
    function db_project_update_record() {
        table = $('#example').DataTable(); 
        //
        project_title_original = document.getElementById('project_title_original').textContent;
        //alert (project_title_original);
        //
        var id            = document.getElementById('div_id').textContent;
        var project_title_new = document.getElementById("project_title").value;
        var project_desc  = document.getElementById("project_description").value;
        var project_cost  = document.getElementById("project_cost").value;
        var date_start    = document.getElementById("project_date_start").value;
        var date_end      = document.getElementById("project_date_end").value;
        eel.project_update_records(id,project_title_original,project_title_new,project_desc,project_cost,date_start,date_end);
    }
    function get_project_title_original(){
        var project_title_original = document.getElementById("project_title").value;
        document.getElementById('project_title_original').textContent = project_title_original;
        return project_title_original
    }
</script>
<!--Navigation bar -->
<div id="nav-placeholder">
</div>
<script>
$(function(){
  $("#nav-placeholder").load("navigation.html");
});
</script>
<!--end of Navigation bar -->

</head>
<body>
    image:
    <img src="imgs\witney-buttercross.jpg" width="40px">
    <h1>Projects</h1>
    <form>
        <div class="row">
            <!-- <div class="container1"> -->
                <div class="col-sm-9">  
                    <table id="example" class="display" style="width:100%">             
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Cost</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Image</th>
                                <th>Folder</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            <!-- </div>  -->
         
            <!-- <div class="container2"> -->
                <div class="col-sm-3">
                    <!-- Controls -->
                    <div class="col-3" id="control">
                        <div id="div_id">1</div>
                        <form>
                        Title:<br>
                        <input id="project_title" name="comments" cols="25" rows="1" onclick= get_project_title_original() onkeyup= db_project_update_record() >Title</input><br>
                        <div id="project_title_original" hidden></div>
                        <br>
                        Description:<br>
                        <textarea id="project_description" name="comments" cols="25" rows="4" onkeyup= db_project_update_record() style="overflow:auto;resize:none">Description</textarea>
                        <br>
                        <br>
                        Cost:<br>
                        <textarea id="project_cost" name="comments" cols="25" rows="4" onkeyup= db_project_update_record() style="overflow:auto;resize:none">Description</textarea>
                        <br>
                        <br>
                        Date (Start):<br>
                        <input id="project_date_start"  type="date" name="depart" onchange= db_project_update_record()><br>
                        Date (Deadline):
                        <input id="project_date_end"    type="date" name="depart" onchange= db_project_update_record()>
                        </form>
                        <br><br>
                        <button id="delBtn" onclick="db_project_del_record()" >Delete</button>
                        <button type="button" onclick="db_project_add_new()">Add</button>
                        <div ></div>
                    </div>
                </div>    
            <!-- </div> -->
        </div>


</body>

</html>

kthorngren · June 2022

Thanks for the code but its difficult to troubleshoot these types of errors without actually seeing them. I built this simple test case that uses your setTimeout function for ajax.reload() every 2 seconds.
http://live.datatables.net/bemaketa/1/edit

Guessing this is where the problem is you are trying to fix. There is no blinking in the test case. Please update the test case or provide a link to show the problem.

Maybe the ajax response takes awhile to be returned causing the blinking. Look at the browser's network inspector to see how long it takes.

Kevin

andras2 · June 2022

Hi there,

I tried with two different scenario;
One with yours, where the Image was hosted on the web. There was no blinking.
One another, where the Image was loaded from the local drive. It was blinking every 2sec.

So, it is blinking when the images come from local. Is it a bug or can we fix it somehow?

kthorngren · June 2022

So, it is blinking when the images come from local. Is it a bug or can we fix it somehow?

As a test try loading one of your images locally outside of Datatables. I don't believe Datatables is doing anything with the images to cause them to blink. If you can provide a link to a test case showing the problem we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

andras2 · June 2022

Hi Kevin,

Thank you for the feedback. Actually the image is not blinking, just it looks like when the whole table is reloading every 2 sec. The table disappear and reload sequencually every 2 sec.

kthorngren · June 2022

Check for a delay in loading the data. If you are using ajax.relaod() to reload the data but you see the rows disappear and redisplay then there might be a delay in fetching the data. In that case you could use a jQuery ajax() request to fetch the data instead of ajax.relaod(). in the success function use clear() followed by rows.add() to add the fetched rows. This way the row change is instantaneous when the new data is ready.

Kevin

andras2 · June 2022

I am affraid, I need further help.

kthorngren · June 2022

The code in the button click event handler you would use in your setTimeout function.
http://live.datatables.net/novadupo/1/edit

If you still need help debugging the issue then please provide a link to your page or a test case replicating the issue. Without that we will be guessing what the problem might be.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

How to display image in column;

How to display image in column;

Answers

Howdy, Stranger!

Categories

DataTables

How to display image in column;

How to display image in column;

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables