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

Search box text

您可以通过操作注入的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"
    }
}

将搜索更改为“”并将lang包含为语言选项：

.withOption('language',lang)

Hide the datatables_info at the bottom

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

.withDOM('lfrtp')

请参阅此处的两个解决方案 – > http://plnkr.co/edit/3WqPj1IW1h3zK37hF4dv?p=preview

add placeholder to the input element

注入的搜索框位于.dataTables_filter输入.您可以使用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添加到元素然后(重新)$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') ;
})