V SH V SH - 1 year ago 100
Javascript Question

Set fontawesome icon DTColumnBuilder in Datatable in Angular Js

I am displaying Json data into datatable using DTColumnBuilder. So right now I am able to display data into each row of the column. But I want to set one font-awesome icon in each row in column.

Controller:

angular.module('app.example').controller('xyz', function ($scope,$http,$state, $stateParams,Rh,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {

this.standardOptions = DTOptionsBuilder

.fromFnPromise(Rl.all('abc/main/logic').getList())
//Add Bootstrap compatibility
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap();
this.standardColumns = [
DTColumnBuilder.newColumn('msg.firstName'),
DTColumnBuilder.newColumn('msg.lastName'),

];

});


HTML

<table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>


I want to add font-awesome icon in column.

DTColumnBuilder.newColumn('fontawesome-icon'),
<th>Action</th>


I have seen one link but I am not getting it correctly. How to combine data and show image in angular datatable. Because I want to use only font-awesome.

<i class="fa fa-refresh" aria-hidden="true"></i>


I have one function for this But I am not able call this function

function action(data) {
return $sce.trustAsHtml('<i class="fa fa-fw fa-folder-open-o"> </i>');
}


Thanks.

Answer Source

You can use renderWith :

DTColumnBuilder.newColumn('msg.lastName')
  .renderWith(function(data, type, full, meta) {
     return '<i class="fa fa-refresh" aria-hidden="true"></i>'
   }) 

HTML will be rendered. See https://datatables.net/reference/option/columns.render for details.

example -> http://plnkr.co/edit/NZSFrdeCAObbRjCAa7Vi?p=preview

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download