jQuery Datatables rendering

Question

In my table I have two fields that are 0 or 1. One of "active" and one is "operative".

So I added this code

"columnDefs": [ {

        "targets": 3,
        "data": "active",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return '<i class="fas fa-times" style="color:red"></i>';}
        },

        
        "targets": 4,
        "data": "operative",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return "";}
        }

  } ]

which should work OK. The column numbers are correct, but the table only render colum 4. If I remove the definition for column 4 it renders column 3 correctly.

Here is a screenshot of the bit in question:

Here is the full definition of the table

<script type="text/javascript">

 $(function () {
 var table = $('.data-table').DataTable({
"iDisplayLength": 25,
"lengthMenu": [ [10, 25, 50,100,200, -1], [10, 25, 50,100,200, "All"] ],
    columnDefs: [
    {
        targets: -1,
        className: 'dt-right'
    }],
    processing: true,
    serverSide: true,
    ajax:"{{ route('AllUsersData') }}",
    columns: [
        
        {data: 'name', name: 'name'},
        {data: 'email', name: 'email'},
        {data: 'company',name: 'company'},
        {data: 'active', name:'active'},
        {data: 'operative', name: 'operative'},
        {data: 'superAdmin', name:'superAdmin'},
        {data: 'action', name: 'action', orderable: false, searchable: false},
    ],

     "columnDefs": [ {

        "targets": 3,
        "data": "active",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return '<i class="fas fa-times" style="color:red"></i>';}
        },

        
        "targets": 4,
        "data": "operative",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return "";}
        },

         "targets": 5,
        "data": "superAdmin",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green"></i>';}
          else
            { return "";}
        }


  } ]

    });
  });
</script>

Here is a sample of the returned data from the ajax call:

Answer 1

Some observations:

1 - You have 2 separate columnDefs sections - these should be merged into one - otherwise the first one, containing className: 'dt-right', will be ignored.

2 - The second larger columnDefs section is missing some curly braces. You have an overall structure like this:

"columnDefs": [...]

Within that, each targets section needs to be contained in its own {...} object:

    "columnDefs": [
      {
        targets: -1,
        className: 'dt-right'
      },     
      {
        "targets": 3,
        "data": "active",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green">x</i>';}
          else
            { return '<i class="fas fa-times" style="color:red">y</i>';}
        }
      },
      {
        "targets": 4,
        "data": "operative",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green">q</i>';}
          else
            { return "p";}
        }
      },
      {
        "targets": 5,
        "data": "superAdmin",
        "render": function ( data, type, row, meta ) {
          if (data == 1)
            {return '<i class="fas fa-check" style="color:green">w</i>';}
          else
            { return "s";}
        }
      } 
    ]

3 - I would be careful using statements such as if(data == 1). In this case, the value of data is a string for example, "1" or "0". So you are effectively saying if("1" == 1). This will evaluate to true...

...but it would be safer to use if(data === "1") - where the triple-equals checks not only the value but also the data type.

I think that should resolve your issues - but there may be additional problems hiding behind these ones. If so, those may need a follow-up question.