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:stackoverflow.com/questions/658044/tick-symbol-in-html-xhtml — soorapadman
– soorapadman, Commented Jul 7, 2016 at 12:15
Provide some sample code plus response data if possible... — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 7, 2016 at 12:15
You can create the markup (HTML) for the icons in the query. — PeterKA
– PeterKA, Commented Jul 7, 2016 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
– Lloyd Owen, Commented Jul 7, 2016 at 13:02

Chris H. · Accepted Answer · 2016-07-07 15:38:54Z

11

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.

answered Jul 7, 2016 at 15:38

Chris H.

2,59422 silver badges32 bronze badges

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

3 Comments

Lloyd Owen Over a year ago

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 Over a year ago

Ok i fixed that with some missing syntax. Now the columns with the icons are returning all null or undefined..

Chris H. Over a year ago

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.

djcaesar9114 · Accepted Answer · 2017-07-09 18:18:22Z

3

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

answered Jul 9, 2017 at 18:18

djcaesar9114

2,1472 gold badges30 silver badges51 bronze badges

2 Comments

Gyrocode.com Over a year ago

That's not a correct way to do it, 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 methods available for each use case.

djcaesar9114 Over a year ago

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.

Etienne Pouliot · Accepted Answer · 2019-03-29 00:52:30Z

0

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
            },

        } ]

    } );
} );

answered Mar 29, 2019 at 0:52

Etienne Pouliot

1243 bronze badges

Collectives™ on Stack Overflow

Render Datatables Boolean Column

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related