如何使用数据表创建基本的 angularjs 指令

Posted 2023-05-07

技术标签:

【中文标题】如何使用数据表创建基本的 angularjs 指令【英文标题】：How to create basic angularjs directive with datatables 【发布时间】：2014-03-10 16:00:42 【问题描述】：

我的html：

<table data-table ng-show="bookings">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>ID number</th>
            <th>Email</th>
            <th>Cellphone</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="booking in bookings | orderBy:['student.firstname', 'student.surname']">
            <td> booking.student.firstname </td>
            <td> booking.student.surname </td>
            <td> booking.student.id_number </td>
            <td> booking.student.email </td>
            <td> booking.student.cellphone </td>
        </tr>
    </tbody>
</table>

我的指令：

.directive('dataTable', function() 
        return 
            restrict: 'A',
            replace: false,
            transclude: true,
            link: function (scope, el, attrs) 
                console.info('dataTable', el);
                $(el).dataTable();
            
        
    )

我没有收到任何错误，但没有显示任何内容（我现在不知道el 是什么）。我希望在信息被嵌入的地方使用它，然后使用 dataTable 的“零配置”。我认为这很简单，唉，指令:(

【问题讨论】：

顺便说一句，你检查过angular-table吗？ @Atropo 谢谢你，虽然我必须有过滤框和分页 【参考方案1】：

你看过ng-grid吗？这是一个提供分页/排序等的本机实现。

但是如果你必须使用 DataTables，看看这个答案，我最近使用了这里的解决方案，效果很好：https://***.com/a/16096071/2383201

【讨论】：

我看过那个例子。这不是我真正希望做的。它有太多的配置可以通过嵌入来完成【参考方案2】：

您不能使用data 作为属性的前缀。将其更改为其他任何内容，例如myTable（用法：my-table）会让指令接收它。

但是，它现在似乎无法解析列，这意味着唯一的解决方案是@Skinty 给出的the link

【讨论】：

【参考方案3】：

您也可以查看angular-datatables - Datables using angular directives 项目。它有很多关于如何将角度指令与数据表一起使用的示例。