Datatables Using Codeigniter 4 - displaying image in a column

Roger2025

I am using Codeigniter 4.6.3

I have a datatable that is working fine - except that I have an image column that the file name for each row's data. I want to display this image instead of the file name.

I cannot find an example of how to display the image instead of the the file name.

I am using the following to display my table:

Controller:

        $data_table->setTable(builder: $Tvguides->noticeTable())
                   ->setDefaultOrder("IssDate", "ASC")
                   ->setSearch(["Year", "CoverDescription","RegionDescription"])
                   ->setOrder(["IssDate", "IssueSubSort"])
                   ->setOutput(["RecordNO" , "IssueNo", "IssueSubSort", "IssDate","CoverDescription","Purch_Date","CoverPrice","RegionDescription","Cost","Year",
                   "CoverPicture"])
                    ;
        return $data_table->getDatatable();

Then in my View:

$(document).ready(function(){
  $('#sample_table').DataTable({
    "order":[],
    "serverSide":true,
    "ajax":{
      url:"<?php echo base_url('/TV2/fetch_all'); ?>",
      type:'POST'
    }

  });
});

As you can see - I have the CoverPicture column - but do not know how to tell the datatables function to display the actual image (with appropriate sizing controls, etc.

Thank you for any help you may provide.

Roger

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

allan

Hi Roger,

Use a data renderer - for example you might have something like:

columnDefs: [
  {
    target: 1, // change to whatever the column index of CoverPicture is
    render: data => `<img src="${data}" />`
  }
]

See more about using custom function in the manual here.

Allan

Roger2025

Here is my new view code - however, the $data comes back as an undefined variable since I have to use PHP encoding to get the secure image path. What syntax should I have surrounding the ${data} to have it recognized by the javascript? Everything up to the actual file name in the img src is correct. Any thoughts?

<script>

$(document).ready(function(){
  $('#sample_table').DataTable({
    columnDefs: [
            {
                targets: 10, //zero is the first column
                 render: data => '<img src="<?= base_url('/secure-images/'.${data}.'.jpg'); ?>"/>'}],

    "order":[],
    "serverSide":true,
    "ajax":{
      url:"<?php echo base_url('/TV2/fetch_all'); ?>",
      type:'POST',
      }
  });
});

</script>

allan

Hmmm - aside from the fact that you need to use back ticks to have a template variable filled in, you are mixing PHP and Javascript there. The PHP will run first, then the Javascript on the client-side, but it looks like you are expecting the PHP to run after the Javascript variable has been filled in for each file.

I don't know what your base_url function is doing, but could you do:

render: (data) => {
  let base = '<?= base_url('/secure-images/');?>';

  return `<img src="${base}/${data}.jpg" />`;
}

That way the rendered Javascript will look like:

render: (data) => {
  let base = '/my/images/path';

  return `<img src="${base}/${data}.jpg" />`;
}

Allan

Roger2025

Your solution worked perfectly! Thank you Allan.

Here is the script in case anyone else is needing it!

<script>

let base = '<?= base_url('/secure-images/');?>';

$(document).ready(function(){
  $('#sample_table').DataTable({
    
    columnDefs: [
            {
                targets: 10, //zero is the first column
                render: (data) => {
                return `<img src="${base}/${data}.jpg" width="30" height="40"/>`;
                                  }
            }
        ],   
          
    "order":[],
    "serverSide":true,
    "ajax":{
      url:"<?php echo base_url('/TV2/fetch_all'); ?>",
      type:'POST',
      }
  });
});

</script>