【发布时间】：2021-08-04 19:39:05
【问题描述】：
我正在使用以下扩展名https://l-lin.github.io/angular-datatables/#/getting-started
让我的 jquery 数据表响应。在我的 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
],
然后我创建了下表，这里是该表的 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>
这是表格的打字稿文件。
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)
});
}
}
很遗憾，它不起作用任何帮助将不胜感激。谢谢。
【问题讨论】：
-
错误是什么？
-
@danday74 我在终端和 Visual Studio 2019 控制台中都没有看到任何错误。但是当屏幕较小时，我没有在我的 jquery 数据表中看到带有加号的绿色圆圈。
标签： angular datatables