Action buttons in DataTable losing event when user selects a


Topic: Action buttons in DataTable losing event when user selects another rows per page value

Palandri pro premium priority asked 2 months ago

Following the example in the docs (https://mdbootstrap.com/docs/b5/vue/data/datatables/#section-action-buttons) I managed to add a working event listener to the action buttons.

Problem happens when datatable has lots of rows and user selects more rows per page (for example 50). When this happens, the new rows are displayed but no event from datatable component is fired.

Expected behavior

The @render event (or another) is fired so i can add event listeners to the new buttons that are displayed in the datatable.

Actual behavior

The added rows does not have event listeners because the @render event is not fired.

Resources (screenshots, code snippets etc.)

Data table component in template:

<data-table id="main-table" :dataset="data" :loading="loading" @render="addDataTableActionsEventListeners"/>

The function i use to add event listeners (taken from your docs example):

function addDataTableActionsEventListeners() {
  loading.value = true
  document.getElementsByClassName('table-action-materials').forEach(btn => {
    if (btn.getAttribute("click-listener") !== "true") {
      btn.addEventListener('click', () => {
        materials.value.detailData = {
          plant: btn.getAttribute('data-plant'),
          orderNumber: btn.getAttribute('data-orderNumber'),
          operationNumber: btn.getAttribute('data-operationNumber')
        }
        materials.value.showDetail = true
      })
      btn.setAttribute("click-listener", "true")
    }
  })
  document.getElementsByClassName('table-action-orders').forEach(btn => {
    if (btn.getAttribute("click-listener") !== "true") {
      btn.addEventListener('click', () => {
        orders.value.detailData = {
          plant: btn.getAttribute('data-plant'),
          orderNumber: btn.getAttribute('data-orderNumber'),
          operationNumber: btn.getAttribute('data-materials')
        }
        orders.value.showDetail = true
      })
      btn.setAttribute("click-listener", "true")
    }
  })
  loading.value = false
}

Mikołaj Smoleński staff commented 2 months ago

Thanks for posting an issue with a detailed description. We're adding it to our list of high-priority bugs and try to fix it as possible.

Keep coding,  Mikołaj from MDB


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.0.0-beta6
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes