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

Question

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





更新

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

Answer 1

Search box text

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

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)

Hide the datatables_info at the bottom

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

.withDOM('lfrtp')

在此处查看这两种解决方案的实际应用-> http://plnkr.co/edit/3WqPj1IW1h3zK37hF4dv?p=preview

add placeholder to the input element

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

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

add ng-bind or ng-click on the 'previous' and 'next' button

这是非常棘手的。注入(inject)的元素与 Angular 无关 - 我相信以某种方式可以添加 ng-click到一个元素，然后(重新) $compile .但是，每次重绘表格时都会重新创建分页按钮，因此需要一遍又一遍地进行“Angular 化”。但是您可以在没有标准 Angular 指令的情况下轻松地促进 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') ;
})