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

Question

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 1

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)
     })
]