如何自定义 angular-datatables 的样式

Question

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

更新

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

Answer 1

Search box text

您可以通过多种方式执行此操作，也可以通过操纵注入的 DOM 元素 - 但 "correct" 方法是更改 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

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

.withDOM('lfrtp')

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

add placeholder to the input element

注入的搜索框位于.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

这很棘手。注入的元素与 angular 无关 - 我相信是以某种方式可以将 ng-click 添加到元素然后 (re)$compile.但是，每次重绘 table 时都会重新创建分页按钮，因此 angularification' 需要一遍又一遍地发生。但是您可以轻松地促进 prev/next 按钮的事件而无需标准 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') ;
})

如何自定义 angular-datatables 的样式

how to customize angular-datatables' style

angularjs

angular-datatables