提问者:小点点

为什么jquery datatable在显示数据详细信息后取消顶部和底部行?


我创建了一个带有jquery DataTable的屏幕。 当屏幕加载数据时,所有操作都正常(对于datatable,将生成3行:第一行包含显示条目和搜索,第二行包含表,第三行包含显示的项和分页。如果我编辑记录的详细信息并返回datatable,则只显示包含表的行。我的表声明如下:

$(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"
  },

谢谢你为解决我的问题提出任何建议。


共1个答案

匿名用户

首先,您需要销毁您的表,然后重新实例化它。 查看以下内容:https://datatables.net/reference/api/destroy()