响应和排序插件的jquery数据表问题,列显示不正确

时间:2018-11-29 12:51:50

标签: datatables

到目前为止,我在jQuery数据表上遇到了一个大问题,到目前为止已经有4天了。

我正在使用响应式插件和colreorder插件。

我在dt选项中都设置了。

两者都可以正常工作。

但是,当我一起使用它们时,我的表格列显示不正确。这是一个示例:

enter image description here

在这里,您会看到...应该在响应列中,而不是出现在组列中。另外,列标题有时可能是错误的。

这是我的代码,用于显示,隐藏和重新排序列,然后重绘。

一次调用此代码有时行得通,有时却行不通。

再次调用有时可以解决列问题,有时可以解决问题!

我很茫然。有任何想法吗?如果您需要更多信息,请询问。

请注意,下面的代码中只有“自定义”标签不起作用,因为它们是唯一使用列重新排序代码的标签。

  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)
    })
  }

0 个答案:

没有答案