如何定制角数据表“风格 [英] how to customize angular-datatables' style

问题描述

我是新来的角度，试图用角的DataTable库 HTTP： //l-lin.github.io/angular-datatables/#/angularWay ，但不知道如何控制表的风格，因为他们都是棱角分明的指令，是有可能，我可以摸HTML元素里面呢？如下面的例子，我怎么能删除旁的文字搜索框？此外，我读过的API，怎么也找不到隐藏在BUTTOM的datatables_info。

---

更新

也许我可以通过CSS隐藏起来，但似乎是不可能的占位符添加到输入元素

解决方案

  

搜索框的文本

可以以各种方式执行此操作，也通过操纵注入DOM元素 - 但正确的方法是改变的 语言 设置。默认的语言对象文本是

VAR LANG = {
    十进制：，
    emptyTable：无表可用的数据
    信息：显示_START_到_TOTAL_条目_END_
    infoEmpty：显示0到0 0的条目，
    infoFiltered：（从_MAX_总条目过滤），
    infoPostFix：，
    千：，
    lengthMenu：显示_MENU_条目
    loadingRecords：载入中...
    加工：处理...
    搜索：搜索，
    zeroRecords：没有符合条件的记录找到
    分页：{
        第一次：第一，
        最后：上次，
        下一个：下一步，
        previous：previous
    }，
    咏叹调：{
        sortAscending：：激活排序列升序
        sortDescending：：激活排序列降
    }
}


修改搜索到，，包括郎为语言选项：

.withOption（'语言'，郎）


  

隐藏datatables_info底部

您可以完全省略 I 从的 DOM 选项。默认 DOM 设置为 lfrtip ，所以干脆

.withDOM（'lfrtp'）


请参阅这里的行动这两个解决方案 - > 的http：// plnkr。 CO /编辑/ 3WqPj1IW1h3zK37hF4dv？p = preVIEW

---

  

添加占位符输入元素

注入的搜索框位于 .dataTables_filter输入。您可以使用 angular.element（）或 document.querySelector（）来操纵这样的DOM元素。要占位符添加到搜索框

  .withOption（'initComplete'，函数（）{
   angular.element（'dataTables_filter输入。'）ATTR（'占位'，'搜索...'）。
}）
 

  在previous和下一步按钮

添加NG-绑定或NG-点击

这是非常棘手的。注入的元素无关具有角 - 我相信它的是的某种方式可以将 NG-点击添加到一个元素，然后（重新） $编译。然而，分页按钮重新创建每一次表，重绘，所以angularification'将需要一遍又一遍的情况发生。但是你可以很容易地方便了preV /下一个按钮事件，而不STD角度指令：

  .withOption（'drawCallback'，函数（）{
   angular.element（'。paginate_button。previous'）。在（'点击'，功能（）{警报（'preV'）}）
   angular.element（'。paginate_button.next'）。在（'点击'，功能（）{警报（'下一步'）}）
}）
 

还有一个 page.dt 事件烧制后在活动页面的变化：

  angular.element（身体）。在（'page.dt'功能（即API）{
   的console.log（'页＃+（api._iDisplayStart / api._iDisplayLength + 1）+'显示'）;
}）
 

I'm new to angular, trying to use angular-datatables library http://l-lin.github.io/angular-datatables/#/angularWay, but don't know how to control the style of the table, cause they are all angular directives, is it possible I can touch the HTML elements inside? like the example below, how can I remove the text next to search box? Also I've read API, couldn't find how to hide the datatables_info on the buttom.

---

update

maybe I can hide them through CSS, but seems it's impossible to add placeholder to the input element

解决方案

Search box text

You can do this in various ways, also by manipulating the injected DOM elements - but the "correct" way would be to alter the language settings. The default language object literal is

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"
    }
}

Change search to "" and include lang as language option :

.withOption('language', lang)

Hide the datatables_info at the bottom

You can disable the table information summary completely by omitting the i flag from the dom option. The default dom setting is lfrtip, so simply

.withDOM('lfrtp')

See both solutions in action here -> http://plnkr.co/edit/3WqPj1IW1h3zK37hF4dv?p=preview

---

add placeholder to the input element

The injected search box is located at .dataTables_filter input. You can use angular.element() or document.querySelector() to manipulate such DOM elements. To add a placeholder to the search box

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

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

This is very tricky. The injected elements has nothing to do with angular - I believe it is somehow possible to add a ng-click to an element and then (re)$compile. However, the pagination buttons is recreated each and every time the table is redrawn, so the angularification' would need to happen over and over. But you can easily facilitate events for the prev/next buttons without std angular directives :

.withOption('drawCallback', function() {
   angular.element('.paginate_button.previous').on('click', function() { alert('prev')} )
   angular.element('.paginate_button.next').on('click', function() { alert('next')} )             
})

There is also a page.dt event, fired when the active page changes :

angular.element('body').on('page.dt', function(e, api) {
   console.log('Page #'+(api._iDisplayStart / api._iDisplayLength + 1) +' shown') ;
})

这篇关于如何定制角数据表“风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！