Angular中DataTables无数据显示且数据位置异常求助

核心问题原因 #

1. 表格结构不规范：DataTables强制要求表格必须包含<thead>标签定义列头，缺失的话会导致列识别失败，进而引发渲染异常。
2. 初始化时机不对：Angular的*ngFor是异步渲染DOM，你直接动态插入脚本初始化DataTables，很大概率在数据还没渲染到页面时就执行了初始化操作——此时DataTables读不到tbody里的行，后续Angular渲染的数据就会“跑”到表格容器外面。
3. DOM操作不符合Angular规范：手动创建script标签的方式绕过了Angular的变更检测和生命周期管理，极易引发时序问题。

分步解决方案 #

1. 补全表格的thead结构 #

先把表格的列头补上，同时修正tbody里的单元格标签（tbody里用<td>而非<th>，避免和表头混淆）：

<table id="dataTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>编码</th>
      <th>条形码</th>
      <th>序列号</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td>{{item.code}}</td>
      <td>{{item.barCode}}</td>
      <td>{{item.sn}}</td>
    </tr>
  </tbody>
</table>

2. 借助Angular生命周期钩子正确初始化DataTables #

放弃手动插入脚本的方式，在组件的生命周期钩子中控制初始化时机：

• 如果数据是异步获取（比如从API请求），要等数据加载完成后再初始化DataTables；
• 如果数据是同步数据，可以在ngAfterViewInit中初始化（此时DOM已渲染完成）。

示例代码：

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
declare var $: any; // 引入jQuery版DataTables需声明$变量

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit, AfterViewInit, OnDestroy {
  items: any[] = [];
  private dataTableInstance: any;

  ngOnInit(): void {
    // 模拟异步加载数据
    this.fetchData().then(res => {
      this.items = res;
      // 数据加载完成后初始化表格
      this.initDataTable();
    });
  }

  // 同步数据可在这里初始化
  ngAfterViewInit(): void {
    // if (this.items.length > 0) this.initDataTable();
  }

  // 销毁组件时清理DataTables实例，防止内存泄漏
  ngOnDestroy(): void {
    if (this.dataTableInstance) {
      this.dataTableInstance.destroy();
    }
  }

  private initDataTable(): void {
    this.dataTableInstance = $('#dataTable').DataTable({
      // 根据需求配置参数
      paging: true,
      searching: true,
      ordering: true,
      language: {
        emptyTable: '暂无数据' // 自定义空表格提示语
      }
    });
  }

  private fetchData(): Promise<any[]> {
    // 模拟API请求，实际项目替换为真实接口调用
    return new Promise(resolve => {
      setTimeout(() => {
        resolve([
          { code: 'PD001', barCode: '6901234567890', sn: 'SN2024001' },
          { code: 'PD002', barCode: '6901234567891', sn: 'SN2024002' }
        ]);
      }, 800);
    });
  }
}

3. 确保DataTables资源正确引入 #

提前在angular.json的styles和scripts数组中引入DataTables的CSS和JS文件（替换为你本地下载的文件路径）：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/assets/datatables/css/jquery.dataTables.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/jquery/jquery.min.js",
              "src/assets/datatables/js/jquery.dataTables.min.js"
            ]
          }
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者MÖHAÇPE ELDDIN