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

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

GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

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

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

  • GlyndwrGlyndwr Posts: 117Questions: 32Answers: 0

    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

This discussion has been closed.