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

check this link:http://stackoverflow.com/questions/658044/tick-symbol-in-html-xhtml — soorapadman, Jul 07 '16 at 12:15
Provide some sample `code` plus response `data` if possible... — Guruprasad J Rao, Jul 07 '16 at 12:15
You can create the markup (HTML) for the icons in the query. — PeterKA, Jul 07 '16 at 12:15
Hi I've added the code I've tried. Unfortunately it just returns nothing once I use the "columns" definition... — Lloyd Owen, Jul 07 '16 at 13:02

score 11 · Accepted Answer · answered Jul 07 '16 at 15:38

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.

Hi there, using this i still get a blank page. Makes sense the changes you made though! Thanks :-) I get this as an output in the console.. Unexpected string literal "columns". Expected '}' to end a object literal. — Lloyd Owen, Jul 08 '16 at 08:08
Ok i fixed that with some missing syntax. Now the columns with the icons are returning all null or undefined.. — Lloyd Owen, Jul 08 '16 at 08:37
If the columns value is actually 1 or 0 I'd consider trying to change the `return (data == true)` to `return (data === 1) and see if that changes anything. — Chris H., Jul 08 '16 at 15:01

score 3 · Answer 2 · answered Jul 09 '17 at 18:18

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

That's not a correct way to do it, [`columns.render`](https://datatables.net/reference/option/columns.render) is better suited for this. Your solution will work only for elements currently in DOM (current page only). Also it's not recommended to manipulate cell content directly, there are [API](https://datatables.net/reference/api/) methods available for each use case. — Gyrocode.com, Jul 09 '17 at 19:46
I don't agree. I generate my table dynamically with express and render with pug, and precising 'render' in the dataTables options is far more complicated than my method. Both method are good, I think everybody facing the same issue should be aware of them, and choose wisely depending on their case. Besides, my method works even with tables not using dataTables. — djcaesar9114, Jul 09 '17 at 20:28

score 0 · Answer 3 · answered Mar 29 '19 at 00:52

Here how I do mine, it will look at all the columns, if it see true ou will replace with the right icon.

$(document).ready(function() {
    $('#table_detail').DataTable( {
        data: json_detail.data,
        columns: json_detail.headers,
        columnDefs : [ {
          "targets": "_all",
            "render": function ( data, type, row ) {
                if (data === true) {
                    data = '<img src="/static/rapport/images/icon-yes.gif">';
                }
                else if (data === true) {
                    data = '<img src="/static/rapport/images/icon-yes.gif">';
                }
                return data
            },

        } ]

    } );
} );

Render Datatables Boolean Column

3 Answers3