How do I exchange a value in column with an icon?

SaleB81

I have a datatable v1.10 with boolean value [0,1] in the third column. I would like to present a that value to a viewer with a red icon for zero and green for one. If it is simpler to do, the whole cell can be red or green, with or without the value in it.

Is there a simple way to do that?

There should be a way to address the value of a cell whose value is this or that, but my js/jquery knowledge is too limited to find a way by myself.

btw. is there a way to give the viewer the option to delete a row from database (or move to other table) without the use of an editor extension?

Thankful in advance,
SaleB

SaleB81

Ok, I have done something and it does the job, but I would really like to add the icons and remove text. Can someone give me the necessary adjustments. I have added following code in my initialization script after "ajax": row:

    "columnDefs": [ {
      "targets": 2,
      "createdCell": function (td, cellData, rowData, row, col) {
        if ( col == 3 || cellData == 0 ) {
          $(td).css('background', 'red')
        }
        else if ( col == 3 || cellData == 1 ) {
           $(td).css('background', 'green')
        }
        else {
          $(td).css('background', 'black')
        }
      } 
    } ]

This code paints the background of the cell according to the cellData value, but the text is still there.

SaleB81

I have found a complete solution for my problem, so I'll post it if anyone else needs it. There may be simpler solution, but this is the one I found to be working.

"columnDefs": [ {
  "targets": 2,
  "createdCell": function (td, cellData, rowData, row, col) {
    if ( col == 3 || cellData == 0 ) {
      $(td).text('');
      var CrvenaIkonica = "./lib/images/red_light.png";
      $(td).css('backgroundImage', 'url('+CrvenaIkonica+')');
      $(td).css('backgroundRepeat', 'no-repeat');
      $(td).css('backgroundPosition', 'center');
      $(td).css('background-size', 'contain');
      //$(td).css(font-weight', 'bold');
      //$(td).css('color', 'red')
    } 
    else if ( col == 3 || cellData == 1 ) {
      $(td).text('');
      var ZelenaIkonica = "./lib/images/green_light.png";
      $(td).css('backgroundImage', 'url('+ZelenaIkonica+')');
      $(td).css('backgroundRepeat', 'no-repeat');
      $(td).css('backgroundPosition', 'center');
      $(td).css('background-size', 'contain');
      //$(td).css('font-weight', 'bold');
      //$(td).css('color', 'green')
    } 
    else {
      $(td).text('Nepoznato');
      $(td).text('font-weight', 'bold');
      $(td).css('color', 'orange')
    }
  }
} ],

Dahark

Hello,

could you do me a favor and put your JavaScript in to CodeBlocks for readability?

Look at http://datatables.net/manual/tech-notes/8

SaleB81

I have tried to do that in the first place. But, have a problem, when using the three ` for the beginning and same three for the end I get only the inline code, and not that what I have hoped to get. So I left it without the Markdown markup. I suppose that it is more readable even as inline code in contrast to regular text

it works now