Jquery DataTables Two Fields in One Column using IF statement

Question

I have a jQuery datatable using AJAX. I would like to have two fields together in one column and also use if statements for both fields.

I can do two fields together:

  { 
     "data" : function (data, type, dataToSet) {return data.primary + "<br/>" + data.proctor;
   }},

I have added some styling a based off an if statement:

    {
      "data" : "primary",
      "render" : function(primary) {
          if (!primary) {
                return '<i class="fa fa-ban"></i> primary';
          } else {
                 return '<i style="color: green" class="fa fa-check"></i> primary';
                    }
                }
            },
   {
      "data": "proctor",
      "render": function (proctor) {
          if (!primary) {
                 return '<i class="fa fa-ban"></i> proctor';
          } else {
                 return '<i style="color: green" class="fa fa-check"></i> proctor';
                    }
                }
            },

How would I combine the two fields into one column and still have the if/else statement?

davidkonrad · Accepted Answer · 2017-09-07 04:34:22Z

2

You can combine the two fields by adding a null column with its own render method :

columns: [
  ...
  { data: null,
    render: function(data, type, full) {
      var ret = '';
      if (!full.primary) {
        ret += '<i class="fa fa-ban"></i> primary';
      } else {
        ret += '<i style="color: green" class="fa fa-check"></i> primary';
      }
      if (!full.proctor) {
        ret += '<i class="fa fa-ban"></i> proctor';
      } else {
        ret += '<i style="color: green" class="fa fa-check"></i> proctor';
      }
      return ret;
    }
  }
]

BTW: I think that ternarys in this case would be better than if..else. At least more readable :

var ret = !full.primary
   ? '<i class="fa fa-ban"></i> primary'
   : '<i style="color: green" class="fa fa-check"></i> primary';

ret += !full.proctor
   ? '<i class="fa fa-ban"></i> proctor'
   : '<i style="color: green" class="fa fa-check"></i> proctor';

return ret;

answered Sep 7, 2017 at 4:34

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

Jay Over a year ago

thanks for your help. I agree the ternarys are more readable. Thanks for providing both examples.

Collectives™ on Stack Overflow

Jquery DataTables Two Fields in One Column using IF statement

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related