How to change an icon in a JQuery Datatables TD element, according to another TD element?

Question

I want to create a Datatable with the JQuery Datatable library, but for beautification and UI reasons, I want an icon to change according to another input field. Lets say,

If td.field 4 is null then td.field 5 icon=1 else icon=2.

Answer 1

You are not going to add an Icon you are going to add a CSS Class and in the CSS class you are going to add the image you want.

Assuming you have made you ajax call and you have the JSON and you are creating the datatable.

table = $('#table').DataTable( {
    "columns": [

            { "className":'userName col-md-2', "data": "userName" },
            { "className":'desc col-md-2', "data": "desc" },
            { "className":'timeStart col-md-2', "data": "timeStart" },
            { "className":'timeEnd col-md-2', "data": "timeEnd" },
            { "className":'dispatcher col-md-2', "data": "dispatcher" },

            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },

        ],
        "order": [[2, 'desc']], !NOT FINISHED YET

Immediate after this and before the table.row.add you have to create seperately the createdRow with the Icon you want to manipulate. Inside the table section you add the statement you want to make for the createdRow.

 "createdRow": function ( row, data, index ) {
         if ( data.dispatcher == null ) {
            $('td', row).eq(5).addClass("edit-incident2");
          }else{
            $('td', row).eq(5).addClass("edit-incident");
          }
        }

After this your code would look like the below witch is the fully table code.

table = $('#table ').DataTable( {
    "columns": [

            { "className":'userName col-md-2', "data": "userName" },
            { "className":'desc col-md-2', "data": "desc" },
            { "className":'timeStart col-md-2', "data": "timeStart" },
            { "className":'timeEnd col-md-2', "data": "timeEnd" },
            { "className":'dispatcher col-md-2', "data": "dispatcher" },

            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },

        ],
        "order": [[2, 'desc']],
        "createdRow": function ( row, data, index ) {
         if ( data.dispatcher == null ) {
          //console.log(data.dispatcher);
            $('td', row).eq(5).addClass("edit-incident2");
          }else{
            $('td', row).eq(5).addClass("edit-incident");
          }
        }    
    } );

Then you draw your table and the statement makes the job.

table.row.add( {
            "userName":     responsejson.userName,
            "desc":         responsejson.desc,
            "timeStart":    responsejson.timeStart,
            "timeEnd":      responsejson.timeEnd,
            "dispatcher":   responsejson.dispatcher,
            "_id":          responsejson._id,
        } ).draw();

The two CSS classes would look like this

td.edit-incident {
    background: url('../img/incident_management.png') no-repeat center center;
    cursor: pointer;}

td.edit-incident2 {
    background: url('../img/incident_management2.png') no-repeat center center;
    cursor: pointer;}

It is not something incredible fantastic but it took me some hours, and I think the result is nice and very easy for the user to immediately understand what is he looking.

Answer 2

"columns": [
{
"className": 'details-control', "orderable": false, "data": null,"defaultContent": '', "render": function (data, type, row) {
     if(data.id==1)
          return '<span class="glyphicon glyphicon-remove"></span>';
     else
     return '<span class="glyphicon glyphicon-ok"></span>';
    },
}
]

just modify the column value before render.it's also possible to directly add the icon into datatable with the help of above code

Answer 3

giv ids for each row  and tds 

     <tr id="1"> 
              <td id="1"></td> 
              <td id="2"></td> 
              <td id="3"></td>
    </tr>

 if you creating <td> dynamically using the database

     for(i=0;i<upto number of tds in a row;i++)
    {   
       if($('#'+i).text()!='')//find td is null or not
       {            
          $('#'+i).append('if');
       }
      else
       {    
          $('#'+i).append('else');
       }
    }