Joel Oliveira Joel Oliveira - 2 months ago 18
AngularJS Question

How to put "data-title" into <td> without ng-repeat using angular-datatables

I was wondering if is it possible to put a data-title option into my

<td>
tag using angular-datatables.

I would like to see my result HTML like this:



<table>
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Id">01</td>
<td data-title="First Name">Paul</td>
<td data-title="Last Name">Summer</td>
</tr>
</tbody>
</table>





This is my example code: http://embed.plnkr.co/K24WFju44neYFRfwBxfK/

Note: Unfortunately I can't use ng-repeat for this, I must put everything on the controller side.

Answer

Look at createdCell. If you want to target a single column (or want different callbacks for each column) use the DTColumnBuilder as in your link :

DTColumnBuilder.newColumn('firstName')
  .withTitle('First name')
  .withOption('createdCell', function (td, cellData, rowData, row, col) {
      $(td).attr('data-title', cellData) //setting the value as title as test
   }),
   ...

I dont know what you want to place in data-title, so I just populate with the cell value. If you want to populate a data-title to every column, you can use DTColumnDefBuilder to implement a generic handler :

vm.DTColumnDefs = [
   DTColumnDefBuilder
    .newColumnDef(-1)
    .withOption('createdCell', function (td, cellData, rowData, row, col) {
       $(td).attr('data-title', cellData)
     })
]