Angular + Jquery 数据表响应不工作

Question

我正在使用以下扩展程序 https://l-lin.github.io/angular-datatables/#/getting-started

让我的 jquery 数据table 响应。在我的 angular.json 文件中，我添加了以下行。

        "styles": [
          "node_modules/datatables.net-dt/css/jquery.dataTables.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.css",
          "node_modules/material-icons/css/material-icons.css",
          "node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
          "node_modules/ngx-toastr/toastr.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
        ]

然后我在 app.module

中导入了 DataTableModule

imports: [
    CommonModule,
    BrowserModule,
    DataTablesModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    }),
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    NgbModule
  ],

然后我创建了以下 table 这里是那个 table

的 html

<table datatable [dtOptions]="dtOptions" class="display table table-striped table-bordered dt-responsive row-border hover" *ngIf="employees">
  <thead>
    <tr>
      <th>{{ 'employee.Number' | translate }} </th>
      <th>{{'employee.UserName' | translate}}</th>
      <th>
        <span class="material-icons" (click)="addEmployee()" href="javascript:void(0);">
          add_box
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.id }}</td>
      <td>{{ employee.userName }}</td>
      <td>
        <a [title]="employee.id + ' employee-details'" [routerLink]="['/employees', employee.id]">
          <span class="material-icons md-18">
            edit
          </span>
        </a>
      </td>
    </tr>
  </tbody>
</table>

这里是table的打字稿文件。

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/Employee';
import { UserService } from '../services/employee.service';

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  public employees: Employee[];

  constructor(private employeeService: UserService ,private http: HttpClient) { }


  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      processing: true,
      responsive: true,
      columnDefs: [{
        targets: [6],
        orderable: false,
        width: "50px"
      }]
    };
    this.employeeService.getEmployees().subscribe(result => {
      this.employees = result;
    }, error => {
      console.log(error)
    });
  }

}

遗憾的是它不起作用任何帮助将不胜感激。谢谢。

Answer 1

请访问 Download Page，并确保select 您计划在 DataTable 中使用的所有内容。在您的 angular.json 文件中，我可以告诉您缺少实际启用 responsive: true, 选项所需的两个文件。

您没有为 DataTables 响应选项包含 JS 脚本和 CSS 样式表。

这里是下载脚本和样式表的链接： https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js

下载这些文件并确保在您的 Angular.json 文件中正确引用它们。

即

        "styles": [
          "node_modules/datatables.net-dt/css/jquery.dataTables.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.css",
          "node_modules/material-icons/css/material-icons.css",
          "node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
          "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
          "node_modules/ngx-toastr/toastr.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
          "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"
        ]

Angular + Jquery 数据表响应不工作

Angular + Jquery Datatable responsivness not working

datatables

angular