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

Question

我是新来的角度,试图用角的DataTable库http://l-lin.github.io/angular-datatables/#/angularWay,但不知道如何控制表的风格,因为他们都是角度指令,我可以触摸里面的HTML元素吗？如下例所示,如何删除搜索框旁边的文字？我也读过API,找不到如何在buttom上隐藏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

将占位符添加到input元素

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