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

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

SaleB81SaleB81 Posts: 6Questions: 1Answers: 1

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

Answers

  • SaleB81SaleB81 Posts: 6Questions: 1Answers: 1
    edited June 2014

    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.

  • SaleB81SaleB81 Posts: 6Questions: 1Answers: 1
    edited June 2014

    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') } } } ],
  • DaharkDahark Posts: 28Questions: 1Answers: 0
    edited June 2014

    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

  • SaleB81SaleB81 Posts: 6Questions: 1Answers: 1
    edited June 2014

    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

This discussion has been closed.