How to check the {data: 'resourseImageType'} value to display a pdf or picture (e.g., jpg)

Glyndwr

I have two types of images that I want to display "pdf" and pictures (e.g., jpeg, jpg, jif). A pdf requires:

return '<embed width="80" height="80" id="image" src="'+data+'" type="application/pdf" class="img-thumbnail">'

a picture requires:

return '<img src="'+data+'" width="40" height="40">'

How do I check the value of {data: 'resourseImageType'} (contains the type of image - e.g., e.g., jpeg, pdf). The code below only returns false so only pictures are displayed. There is no console error.

    var actionPlanTable = $('#actionPlanTable').DataTable( {

        "info":     false,
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        columns: [
              {data: 'resourceID',
                  visible: false,
                  searchable: false},
              {data: 'resourseImage'},
              {data: 'resourseType'},
              {data: 'resourseName'},
              {data: 'resourseDescription'},
              {data: 'resourseImageType',
                  searchable: false},
              {data: null,
                  className: "center",
                  defaultContent: '<button type="button" id="apUpdate">Update</button>'
              },
              {data: null,
                  className: "center",
                  defaultContent: '<button type="button" id="apDelete">Delete</button>'
              }
             ],
         columnDefs: [
            { targets: 1, 
                render: function(data) {
                    if ({data:'resourseImageType'} === "pdf"){
                        return '<embed width="80" height="80" id="image" src="'+data+'" type="application/pdf" class="img-thumbnail">'
                    }else{
                        return '<img src="'+data+'" width="40" height="40">'
                    }
                }           
            }, 
         ],
    } );

Kind regards,

Glyn

colin

Hi @Glyndwr ,

Yep, as you said, columns.render only has details for that cell, not the row. If you do your logic inside createdRow instead, you'll have access to the data for the row. This example here should help.

Cheers,

Colin

Glyndwr

Hi Colin,

Thanks for your help.I can not work out the "if" statement. I have added:

        "info":     false,
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        data: data,
        "createdRow": function ( row, data, index ) {
            if (data.resourseImageType === "pdf") {
                return '<embed width="80" height="80" id="image" src="'+data.resourseImage+'" type="application/pdf" class="img-thumbnail">'
            }else{
                return '<img src="'+data.resourseImage+'" width="40" height="40">'
            }
        },  
        columns: [

This gives the console error:

jquery.min.js:2 jQuery.Deferred exception: data is not defined ReferenceError: data is not defined
at showActionPlanDataTable

Kind regards,

Glyn

colin

Hi @Glyndwr ,

You've got data in two scopes - at line 4, then again at line 5. It shouldn't matter, but it would be worth renaming one, so at least you know which is causing the problem.

Cheers,

Colin

Glyndwr

Hi Colin,

Thanks for your help.

I replaced "data" line 5 (and within the function with "data1". The console error is:

jquery.min.js:2 jQuery.Deferred exception: data is not defined ReferenceError: data is not defined
at showActionPlanDataTable

and:

Uncaught ReferenceError: data is not defined
at showActionPlanDataTable (resourceAdmin.js:228)
at HTMLDocument.<anonymous> (resourceAdmin.js:15)
at l (jquery.min.js:2)
at c (jquery.min.js:2)

I am only replacing the content of cell 1; however, the examples talk about the whole row. Also, I can not see how the replacement code is going into cell 1. The function and if statement just does not look correct; however, I can not find how to correct it.

Kind regards,

Glyn

Glyndwr

Hi Colin,

OK, data is not needed, and I have adjusted the code to:

        createdRow: function (row, data, index) {
            if (data.resourseImageType === "pdf") {
//                  $('td', row).eq(1).add('<embed width="80" height="80" id="image" src="'+data.resourseImage+'" type="application/pdf" class="img-thumbnail">');
                $('td', row).eq(1).text('<embed width="80" height="80" id="image" src="'+data.resourseImage+'" type="application/pdf" class="img-thumbnail">');
            }else{
//                  $('td', row).eq(1).add('<img src="'+data.resourseImage+'" width="40" height="40">');
                $('td', row).eq(1).text('<img src="'+data.resourseImage+'" width="40" height="40">');
            }
        }, 

This just adds the image string not the image picture.

Note: the other two image data is much shorter so the ends do not show on this screen grab; however, they are there.

So the question is how do I properly add the two HTML lines please?

This is what I am aiming for, except with the pdf displaying as well.

This is screen grab what is produced by my original code.

Again, I very much appreciate your help.

Kind regards,

Glyn

Glyndwr

Hi Colin,

Thank you very much. The answer is "full":

         columnDefs: [
            { targets: 1, 
                render: function(data, type, full, meta) {
                    if (full.resourseImageType === "pdf"){
                        return '<embed width="80" height="80" id="image" src="'+data+'" type="application/pdf" class="img-thumbnail">'
                    }else{
                        return '<img src="'+data+'" width="40" height="40">'
                    }
                }
            },
         ],

Kind regards,

Glyn