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:

Can you edit the question, to show (1) some sample source JSON(?) data, (2) the DataTable definition, and (3) the HTML table code? — andrewJames
– andrewJames, Commented Dec 1, 2020 at 19:58
Sorry I should have stated I added a column. Always it is the last one that renders correctly — Jim
– Jim, Commented Dec 1, 2020 at 21:07
Thanks for the updates. For future reference, it is always better to provide the actual data (the original JSON in this case) as formatted text, rather than (or maybe as well as) a screenshot of the data. It is easier to copy and test. — andrewJames
– andrewJames, Commented Dec 1, 2020 at 22:11

andrewJames · Accepted Answer · 2020-12-01 22:10:23Z

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.

Thanks so much. I did not see the extra colDefs. It's amazing how you can look at code and miss something. I have taken on board you if (data === "1") and now all is well. Thanks again!

Collectives™ on Stack Overflow

jQuery Datatables rendering

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related