Angular 4 数据表。搜索占位符答案

【问题标题】：Angular 4 DataTables. Search placeholderAngular 4 数据表。搜索占位符
【发布时间】：2017-12-05 20:52:45
【问题描述】：

我已将 DataTables 加载到我的 Angular 应用程序中，并且想知道如何将一些文本作为占位符放在搜索框中。此外，我希望“搜索：”一词出现在框的左侧，我认为这是默认设置，但我想不是。这是我的截图。

component.ts

dtOptions: any = {
  lengthChange: false,
  dom: 'Bfrtip',
  buttons: [
    'colvis'
  ],
  aoColumnDefs: [
    { aTargets: [7, 8], bVisible: false}
  ]
};
dtTrigger: Subject<any> = new Subject();

component.html

 <table datatable class="bordered" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">

【问题讨论】：

标签： html angular datatables

【解决方案1】：

HTML

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

在 .ts 文件中

export class WithOptionsComponent implements OnInit {

  dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
     searchPlaceholder: 'search here',
    };
  }
}

【讨论】：

【解决方案2】：

 export class WithOptionsComponent implements OnInit {

  dtOptions: DataTables.Settings = {};

  ngOnInit(): void {
    this.dtOptions = {
     language: {
        searchPlaceholder: 'Search user',
      }
    };
  }
}

【讨论】：

【解决方案3】：

您可以添加语言属性来设置措辞。

component.ts

dtOptions: any = {
  lengthChange: false,
  dom: 'Bfrtip',
  buttons: [
    'colvis'
  ],
  aoColumnDefs: [
    { aTargets: [7, 8], bVisible: false}
  ],
  language: {
    url: '/assets/styles/en.json',
    searchPlaceholder: "Search here...",
    search: "Search:",
  }
};

【讨论】：