Add html element within td after Ajax request in jQuery DataTables

Question

I want to add html element within td after get response from ajax.

Result will be somethings like:

<tr>
<td class="mycus-class" data-title="abc"><span class="mycus-class2">XYZ</span></td>
<td class="mycus-class" data-title="ghi"><span class="mycus-class2">GKL</span></td>
.....
</tr>

Far too broad. We don't know if the ajax is bound to the plugin or not. Need to put forth more effort outlining your issues especially when it involves a complex plugin — charlietfl
– charlietfl, Commented Oct 7, 2015 at 13:51

davidkonrad · Accepted Answer · 2015-10-07 14:13:36Z

34

Very easy with a render() function, here a little demo :

var data = [
    { firstName: 'john', lastName : 'doe' }
]

var table = $('#example').DataTable({
    data : data,
    columns : [
       {  data : 'firstName',
          render : function(data, type, row) {
              return '<span class="mycus-class2">'+data+'</span>'
          }    
       },
       {  data : 'lastName' }
   ]        
})

http://jsfiddle.net/e9be48oq/

You can target multiple columns in one call :

columnDefs : [
   { targets : [0,3,4,5],
     render : function(data, type, row) {
        return '<span class="mycus-class2">'+data+'</span>'
     }     
   }
]

answered Oct 7, 2015 at 14:13

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

Gyrocode.com Over a year ago

@chotesah, consider accepting the answer if it helped you out.

Tarun Sharma · Accepted Answer · 2018-02-07 13:34:14Z

  "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                console.log(aData[1]);
                if (aData[1] == "Imported")
                {
                    // $('td').css('background-color', '#FBE9E7');
                     $(nRow).find('td:eq(1)').addClass('label label-success');
                } else if (aData[1] == "Inactive") {
                    $(nRow).find('td:eq(1)').addClass('label label-danger');
                } else if(aData[1] == "Exported") {
                   $(nRow).find('td:eq(1)').addClass('label label-primary');
                }else{
                  $(nRow).find('td:eq(1)').html('<span class="label label-default">'+aData[1]+'</span>');
                    // $.addClass('label label-default');
                }

            },

Collectives™ on Stack Overflow

Add html element within td after Ajax request in jQuery DataTables

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related