angularjs - 如何自定义角度数据表的样式

Question

我是 angular 新手，尝试使用 angular-datatables 库http://l-lin.github.io/angular-datatables/#/angularWay，但不知道如何控制表格的样式，因为他们都是角度指令，我可以触摸里面的 HTML 元素吗？像下面的例子，我怎样才能删除搜索框旁边的文字？我也读过 API，找不到如何隐藏按钮上的 datatables_info。

---

更新

也许我可以通过 CSS 隐藏它们，但似乎不可能将占位符添加到输入元素

Answer 1

搜索框文字

您可以通过多种方式执行此操作，也可以通过操作注入的 DOM 元素 - 但“正确”的方式是更改语言设置。默认语言对象字面量是

var lang = {
    "decimal":        "",
    "emptyTable":     "No data available in table",
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",
    "processing":     "Processing...",
    "search":         "Search:",
    "zeroRecords":    "No matching records found",
    "paginate": {
        "first":      "First",
        "last":       "Last",
        "next":       "Next",
        "previous":   "Previous"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

更改search为选项""并包括lang在内language：

.withOption('language', lang)

隐藏底部的datatables_info

您可以通过省略选项中的i标志来完全禁用表信息摘要dom。默认dom设置是lfrtip，所以很简单

.withDOM('lfrtp')

在这里查看这两种解决方案 -> http://plnkr.co/edit/3WqPj1IW1h3zK37hF4dv?p=preview

---

将占位符添加到输入元素

注入的搜索框位于.dataTables_filter input。您可以使用angular.element()或document.querySelector()操作此类 DOM 元素。向搜索框添加占位符

.withOption('initComplete', function() {
   angular.element('.dataTables_filter input').attr('placeholder', 'Search ...');
})

添加 ng-bind 或 ng-单击“上一个”和“下一个”按钮

这是非常棘手的。注入的元素与角度无关 - 我相信以某种方式可以将 a 添加ng-click到元素然后 (re) $compile。但是，每次重绘表格时都会重新创建分页按钮，因此需要一遍又一遍地进行“角度化”。但是您可以在没有标准角度指令的情况下轻松地促进 prev/next 按钮的事件：

.withOption('drawCallback', function() {
   angular.element('.paginate_button.previous').on('click', function() { alert('prev')} )
   angular.element('.paginate_button.next').on('click', function() { alert('next')} )             
})

还有一个page.dt事件，在活动页面更改时触发：

angular.element('body').on('page.dt', function(e, api) {
   console.log('Page #'+(api._iDisplayStart / api._iDisplayLength + 1) +' shown') ;
})