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

Question

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

更新

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

Answer 1

  

搜索框文字

您可以通过操纵注入的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)

  

隐藏底部的datatables_info

您可以通过忽略dom选项中的i标记来完全禁用表信息摘要。默认dom设置为lfrtip，因此只需

.withDOM('lfrtp')

请参阅此处的两个解决方案 - ＆gt;的 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-click

这非常棘手。注入的元素与angular无关 - 我相信 以某种方式可以将ng-click添加到元素然后（重新）$compile。但是，每次重绘表时都会重新创建分页按钮，因此需要反复进行角度化。但是，您可以轻松地为prev / next按钮提供事件，而无需std angular指令：

.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') ;
})