Проблемы с jquery datatables с отзывчивыми плагинами и плагинами цветопередачи, столбцы отображаются неправильно

Question

У меня огромная проблема с таблицами данных jQuery, пока 4 дня.

Я использую адаптивный плагин и плагин colreorder.

Я установил оба в dtoptions.

Оба отлично работают по отдельности.

Однако, когда я использую их вместе, мои столбцы таблицы отображаются неправильно.Вот пример:

Здесь вы видите ..., который должен быть в отзывчивом столбце, а не появляться в столбце группы.Кроме того, заголовки столбцов иногда могут быть неправильными.

Вот мой код для отображения, скрытия и изменения порядка столбцов, а затем перерисовки.

Вызов этого кода один раз иногда работает, а иногда нет.

Повторный вызов иногда исправляет проблемы со столбцами, а иногда -!

Я в растерянности.Есть идеи?Если вам нужна дополнительная информация, пожалуйста, спросите.

Обратите внимание, что только «пользовательские» вкладки в приведенном ниже коде не работают, поскольку они единственные, которые используют код переупорядочения столбцов.

  showHideColumns(tab: any): void {

    this.getDtInstanceAsSoonAsItIsReady().then((datatable: any) => {

      const columnNames = tab.fields || []
      const allAvailableColumns = this.getAllColumnNames()
      let visibleColumns = [
        'iccid:name',
        'active_connection_msisdn:name'
      ]

      if (tab.id === 'summary' || tab.type === 'custom') {
        visibleColumns = [
          'iccid:name',
          'active_connection_msisdn:name',
          'mno_account_mno_name:name'
        ]
      }

      visibleColumns.push('expandArrow:name')

      const hiddenColumns = []
      if (columnNames) {
        for (const columnName of allAvailableColumns) {
          if (columnNames.indexOf(columnName) >= 0) {
            visibleColumns.push(columnName + ':name')
          } else {
            hiddenColumns.push(columnName + ':name')
          }
        }
      }

      datatable.colReorder.reset()

      if (tab.type === 'custom') {
        let visibleIndexes = [0, 1, 2, 3] // Fixed columns always present
        visibleIndexes = visibleIndexes.concat(columnNames.map((col) => datatable.column(col + ':name').index()))

        const order = visibleIndexes.concat(datatable.colReorder.order().filter((item) => {
          return visibleIndexes.indexOf(item) < 0
        }))
        datatable.colReorder.order(order)
      }

      datatable
        .columns(hiddenColumns)
        .visible(false, false)

      datatable
        .columns(visibleColumns)
        .visible(true, false)

      debug('showHideColumns - Draw datatable on tab change (makes HTTP request)')
      datatable.page(datatable.page.info().page).draw(false)
    })
  }