Navigation blocked during ajax request

addex03

Hi all,
When my datatable is fetching data from server with ajax, I can not navigate through hypertext links. It waits until the datatable finishes loading. This is not the normal behaviour, and I don't remember if it was explicitly set. I could not figure out why? Is there any flag that needs to be enabled/disabled? which flag/option can I debug?

This is my config:

const DEFAULT_OPTIONS = {
  ajax: {
    url: '',
    async: true,
    cache: true,
    type: 'GET',
    dataType: 'json',
    beforeSend: (xhr, settings) => {
      // xhr.setRequestHeader('Authorization', 'bearer *********')
    },
    // handle data to be sent to server
    data: (data, settings) => {
      // cancel previous request if exists
      if (settings.jqXHR) {
        settings.jqXHR.abort()
      }
      let _data = {}
      if (typeof data.start !== 'undefined' && typeof data.length !== 'undefined') {
        _data.limit = data.length
        _data.page = (data.start / data.length) + 1
      }
      // set column order
      if (typeof data.order === 'object' && data.order.length > 0) {
        let colNum = data.order[0].column
        let attrName = settings.aoColumns[colNum].data
        _data[`order[${attrName}]`] = data.order[0].dir
      }
      // set search value
      if (data.hasOwnProperty('search') && data.search.value !== '') {
        _data['search'] = data.search.value
      }
      return _callbacks.buildQuery(_data, settings)
    },
    // handle response
    dataFilter: (data, settings) => {
      return _callbacks.buildResult(data, settings)
    },
    error: () => {
      Alert.error('Error !', 'Unable to fetch data for content', 0)
    }
  },
  dom: `<'row'<'col-sm-6'i><'col-sm-2'l><'col-sm-4'p>>
  <'row'<'col-sm-12'tr>>
  <'row'<'col-sm-12'p>>`,
  language: i18nConfig[context.locale],
  bSortCellsTop: true,
  processing: false,
  serverSide: true,
  displayLength: 10,
  lengthMenu: [10, 15, 25, 30, 40, 50, 75, 100],
  responsive: true,
  paging: true,
  lengthChange: true,
  searching: false,
  ordering: true,
  info: true,
  autoWidth: false,
  destroy: true,
  oClasses: {
    sLengthSelect: 'form-control selectpicker btn-sm'
  },
  preDrawCallback: (settings) => {
    let $tableWrapper = $(settings.nTableWrapper)
    let $select = $tableWrapper.find('.selectpicker')
    $select.attr('data-style', 'btn-sm').attr('data-width', 'fit')
    $select.selectpicker()
  }
}

allan

Can you link to a page showing the issue please?

DataTables doesn't use async: false at all.

Thanks,
Allan