JQuery Datatables - returning html with javascript conditional statements

Question

I'm currently on a project where I am using JQuery Datatables to show my data. I'm using the datatables render method to format my data before display. I'm stuck at a point where I need to return some html, but with javascript if statements inbetween. The html contains strings, html elements, JS variables, and then if statements. This is what I am trying to do:

"columnDefs": [
   { 
     "targets": [0],
     "render": function ( data, type, full ) {
         return  my_stuff;
     }   
   }
 ]

my_stuff is not a variable, but the html I am trying to return. I used it here to represent what I'm trying to achieve. And below is what I want to put exactly where my_stuff is:

'<div class="row">' +
'<div class="col-md-1">' +
if (full[0] == '1') { 
    '<a href="#profile-img-full-' + poster + '" data-toggle="modal" title="Click to view full image">' +
    '<img class="poster-photo" src="<?php echo base_url(); ?>assets/img/profile-images/' +full[1]+ '" /> </a>' +
} else if (full[0] == 'M') { 
    '<img class="poster-photo" src="<?php echo base_url(); ?>assets/img/avatars/avatar-male-user.png" />' +
} else if (full[0] == 'F') { 
    '<img class="poster-photo" src="<?php echo base_url(); ?>assets/img/avatars/avatar-female-user.png" />' +
} 
'</div>' +  
'<div class="col-md-11">' +    
'<span style="color: blue"> Posted by: </span>'  +               
if (full[2]  == username ) { 
    'You'                       
} else { 
    '<a href="<?php echo base_url(); ?>user/' + poster + '">' +full[2]+ '</a>' +
}
'<br/></div></div>' +
'<div class="post-body">' + full[3] + '</div>';

When I test this, my table disappears, but when I remove the if statements, all goes well. So I'm guessing I can't have if statements in a return statement, or maybe I'm not doing it right. Besides, returning html elements this way doesn't seem right to me, because I have more of it to return, just posted some of it here. So is there a better way to this? I'm using Code Igniter framework, just in case. In summary, how do I return something like that without having to trick Javascript to think it's a string by enclosing everything in quotes?

Kalamarico · Accepted Answer · 2017-09-17 21:57:05Z

1

Your code is not correct, you can't use an IF conditional in the middle of concat, what you want is ternary operator, you must do:

'<div class="row">' +
'<div class="col-md-1">' +
(full[0] == '1' ? 
    '<a href="#profile-img-full-' +poster+ '" data-toggle="modal" title="Click to view full image">' :
    (full[0] == 'M' ?
        'blablabla' :
        (full[0] == 'F' ?
            'moreblablabla' :
            'another'))) 
.............

As you see, you need to use ternary, see this link to get a detailed info about ternary operator.

edited Sep 17, 2017 at 21:57

answered Sep 17, 2017 at 21:48

Kalamarico

5,71622 gold badges57 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Datatables - returning html with javascript conditional statements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related