为什么 jquery 数据表在显示数据详细信息后会抑制顶线和底线？

Question

我创建了一个带有 jquery 数据表的屏幕。 当屏幕加载数据时一切正常（对于数据表，生成 3 行：第一行包含显示条目和搜索，第二行包含表格，第三行包含显示和分页的项目。如果我编辑一个记录，然后我回到数据表，只显示包含该表的行。我的表声明如下：

$(document).ready(() => {
  const forumTable = $('#forumTable').DataTable({
    autoWidth: true,
    columns: [
      { data: 'id' },
      { data: 'name' },
      { data: 'publicForum' },
      { data: 'status' },
    ],
    columnDefs: [
      {
        orderable: false,
        targets: 4,
      },
    ],
    language: {
      url,
    },
  });
  $('#forumTable tbody').on('click', 'tr', () => {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      forumTable.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
    }
  });
});

有没有人有同样的问题？

我的项目依赖项如下：

  "dependencies": {
    "@angular/animations": "^9.1.7",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "^9.1.7",
    "@angular/compiler": "^9.1.7",
    "@angular/core": "^9.1.7",
    "@angular/forms": "^9.1.7",
    "@angular/localize": "^9.1.7",
    "@angular/platform-browser": "^9.1.7",
    "@angular/platform-browser-dynamic": "^9.1.7",
    "@angular/router": "^9.1.7",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@ngrx/effects": "^9.1.2",
    "@ngrx/store": "^9.1.2",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@popperjs/core": "^2.4.0",
    "angular-disable-browser-back-button": "^1.0.1",
    "angular-user-idle": "^2.2.2",
    "bootstrap": "^4.5.0",
    "ckeditor4-angular": "^1.2.0",
    "crypto-ts": "^1.0.2",
    "datatables.net-bs4": "^1.10.21",
    "datatables.net-responsive-bs4": "^2.2.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "moment": "^2.25.3",
    "moment-timezone": "^0.5.29",
    "ng-pick-datetime": "^7.0.0",
    "ng-recaptcha": "^5.0.0",
    "rxjs": "~6.5.4",
    "string": "^3.3.3",
    "tslib": "^1.13.0",
    "zone.js": "~0.10.2"
  },

感谢任何解决我的问题的建议。

Answer 1

首先，您需要销毁您的表，然后重新实例化它。 看看这个： https://datatables.net/reference/api/destroy()