Render Datatables Boolean Column

Question

I have datatables returning the data using server side processing. I have not modified the basic example given from data tables.

I have some boolean columns that I want to render as icons e.g. 1 = Green tick 0 = red cross or something similar. It currently looks like this. How would I go about rendering just 3 columns?

here's the code, i've tried, however this results in the whole table being blank...

    $(document).ready(function() {
    $('#log').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "assetlog.php"
    "columns": [
          { "data": "id" },
           { "data": "assetcode" },
           { "data": "name"},
           { "data": "shift" }
           { "data": "datetime" },
           { "data": "stop_production" },
           { "data": "furtheractions" }
           { "data": "jobcomplete" },
           { "data": "duration" },
           ],
           "columnDefs": [
                      {
                          "render": function (data, type, row) {
                              return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>';
                          },
                          "targets": 6
                      }
                  ]

    } );
} );

Thanks

Answer 1

It may be a little late but I actually had the same problem. Here is a short code to replace the values "1" and "0" by a green Bootstrap tick or a red Bootstrap cross:

function remplacerBool(tableauID, boolClass) {
  $(tableauID + ' tr').each(function (i, row) {
    $('td', this).each(function (j, cell) {
      if ($(tableauID + ' th').eq(j).hasClass( boolClass )) {
        if (cell.innerHTML == '1') {cell.innerHTML = '<div class="text-center text-success"><span class="glyphicon glyphicon-ok-circle"></span></div>';}
        if (cell.innerHTML == '0') {cell.innerHTML = '<div class="text-center text-danger"><span class="glyphicon glyphicon-remove-circle"></span></div>';}
      }
    });
  });
};

All you have to do is:

• precise in the th of the table head which columns should get a particular class if they contain boolean values. For example, I use <th class='bool'>
• call the function with these two arguments:
  • the table ID
  • the name of the class the function should recognize as boolean

Answer 2

columns and columnDefs are redundant; that is, what you currently added to columnDefs shouls just go in your columns for the ones you want to have the tick marks. It should look like this:

/*Note that I'm assuming you're using DT 1.10.x, so the 'b' in front of boolean options
 *is unnecessary, if you aren't using 1.10.x then go ahead and put those back in.*/
 $(document).ready(function() {
    $('#log').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajaxSource": "assetlog.php"
        "columns": [
           { "data": "id" },
           { "data": "assetcode" },
           { "data": "name"},
           { "data": "shift" },
           { "data": "datetime" },
           /*Note that data == true instead of ===, if you have 1 or 0 it isn't ===
           (strictly equal) to true but it is == (evaluates to equal) to true*/
           { "data": "stop_production",
             "render": function (data, type, row) {
                          return (data === true) ? '<span class="glyphicon glyphicon-ok">
                          </span>' : '<span class="glyphicon glyphicon-remove"></span>';}
           },
           { "data": "furtheractions",
             "render": function (data, type, row) {
                          return (data == true) ? '<span class="glyphicon glyphicon-ok">
                          </span>' : '<span class="glyphicon glyphicon-remove"></span>';}
           },
           { "data": "jobcomplete",
             "render": function (data, type, row) {
                          return (data == true) ? '<span class="glyphicon glyphicon-ok">
                          </span>' : '<span class="glyphicon glyphicon-remove"></span>';}
           },
           { "data": "duration" }
       ]
    } );
} );

I made 3 changes to your code, 2 relevant to this issue and one to just update the syntax. The important 2 changes are:

• Move the render function into each column that you want to have this behavior, instead of just having it in a redundant columnDefs
• Change data === true to data == true since 1 is not === true but it is == true (=== is for strict comparisons taking type into account)

And the one less relevant change was:

• bProcessing and bServerSide should be processing and serverSide. The former was the legacy format for DataTables options, which used hungarian notation, and since you don't have hungarian notation for columns you must be using v1.10.x which doesn't need that deprecated notation.

Note: You also mentioned that you get a blank page once you added the columns option, but you appear to be missing a comma after data: shift which could explain that.