如何使用 angular-datatables 在没有 ng-repeat 的情况下将 "data-title" 放入 <td>

Question

我想知道是否可以使用 angular-datatables 将 data-title 选项放入我的 <td> 标签中。

我希望看到这样的结果 HTML：

<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>

这是我的示例代码：http://embed.plnkr.co/K24WFju44neYFRfwBxfK/

注意：很遗憾，我不能为此使用 ng-repeat，我必须将所有内容都放在控制器端。

Answer 1

看看createdCell。如果您想针对单个列（或希望对每列进行不同的回调），请使用 DTColumnBuilder 中的 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
   }),
   ...

我不知道你想在 data-title 中放置什么，所以我只填充了单元格值。如果要将 data-title 填充到每一列，可以使用 DTColumnDefBuilder 来实现通用处理程序：

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

如何使用 angular-datatables 在没有 ng-repeat 的情况下将 "data-title" 放入 <td>

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

javascript

jquery

html

angularjs

angular-datatables