設置fontawesome圖標DTColumnBuilder在Angular Js中的Datatable中

我使用DTColumnBuilder將Json數據顯示到數據表中。所以現在我能夠在列的每一行顯示數據。但是我想在列的每一行中設置一個字體超棒的圖標。設置fontawesome圖標DTColumnBuilder在Angular Js中的Datatable中

控制器：

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>

我想在列中添加字體真棒圖標。

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

我看過一個鏈接，但我沒有正確地得到它。 How to combine data and show image in angular datatable。因爲我只想使用font-awesome。

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

我有這個功能，但我不能夠調用這個函數

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

感謝。

來源

2017-08-16 V SH

您可以使用renderWith：

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

HTML將呈現。詳情請參閱https://datatables.net/reference/option/columns.render。

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

使用createdCell和$compile如果你需要的指令附加到返回的HTML：

.withOption('createdCell', function(cell, cellData, rowData, rowIndex, colIndex) { 
    $compile(cell)($scope) 
})

來源

2017-08-16 11:36:54 davidkonrad

我的推杆上的返回數據+「＆NBSP NG點擊'+''。但ng-click不起作用。 –

不，因爲角度不知道渲染的標記。看到更新，也更新了plnkr。 – davidkonrad

設置fontawesome圖標DTColumnBuilder在Angular Js中的Datatable中

回答

相關問題