How to trigger v-data-table-server reload based on external trigger

[christianholland]

Hi there,

I have implemented a server side table which reloads nicely upon change of pagination, sorting or search via the @update:options=reload event. However, I would like to trigger the reload also based on an external variable. In particular I have an input field that allows the user to specify a time window to filter for entries that were generated within this time window.

I was thinking to implement a watcher on this variable which triggers the reload function however, I have no access to the requried paramter such as page, itemsPerPage sortBy or search. Has anyone done this before?

Any help would be highly appreciated

[ilyen85]

I had the same problem, and I came up with the following hack, this is not a solution to the problem by any means and I'm not proud of it...

The process goes like this:

• created a date_token to track the date filter's changes (users are allowed to look for records created after, before, or in between dates)
• add a watcher listening to the changes of the date_token
  • modify the value of the search field's value (field to filter results by a search term)
  • at the nextTick restore the original search value
• create a method debouncedSearch to handle the DataTable's update:options events
  • (this is important because debounce will make sure only the last doSearch call is executed)
  • also I needed this because I wanted to prevent consecutive doSearch requests while the user is typing the search term
• use modifySearch method to add the dates to the original search options the DataTable will send when the update:options event is triggered

import debounce from 'lodash/debounce'

// method to modify the VuetifyTable's search options
const modifySearch = search_options => {
  let modified_options = JSON.parse(JSON.stringify(search_options))
  let date_settings = null
  if(date_from.value || date_to.value) {
    let date_relation = 'between'
    if(!date_from.value) {
      date_relation = '<='
    }
    if(!date_to.value) {
      date_relation = '>='
    }
    date_settings = {
      min: date_from.value,
      max: date_to.value,
      relation: date_relation,
    }
  }
  
  // add date settings to the search options
  if(date_settings) {
    modified_options['date'] = date_settings
  }

  return modified_options
}

// debounced method triggered by VuetifyTable's update:options event
const debouncedSearch = debounce(options => doSearch(options), 1000, { leading: false, trailing: true })

// http request to gather search results
const doSearch = options => {  
  let all_search_settings = modifySearch(options)
  $axios.post('/search/endpoint', all_search_settings).then(processSearchResponse)
}

const date_token = computed(() => `${date_from.value}_${date_to.value}`)

// concatanated date_from and date_to as a string
watch(() => date_token.value, () => {
  // Trigger a change in search_string (will remove it leater)
  search_string.value += ' omgthisislame'
  nextTick(() => {
    search_string.value = search_string.value.replaceAll(' omgthisislame', '')
  })
})

Please let me know if it's unclear, I'm using this solution at the moment, and itWorksOnMyMachine ™ :D

But it would be lovely to have a way to trigger this more easily with a prop or something.
Also, I would love to have the possibility to trigger filter events on blur (when the user clicks away from the search field) rather than triggering the event with every keydown event...

[christianholland]

@ilyen85 Nice, thats a creative workaround, thanks a lot! I managed to make it almost work, however, I struggle with the debounce. From where do you import this function?

[ilyen85]

Hey @christianholland yeah sorry I forgot that one, it's from lodash, I will modify my previous message to have that import also.

[Mmarin95]

Hello guys

I think I can trigger the table so easy. The table triggers when, @update:options, any options changes, so I only allow changes manually with the help of :search prop and a triggerFetch function.

First I have a ref bind to the :search prop

<v-data-table-server
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="serverItems"
    :items-length="totalItems"
    :loading="loading"
    :search="search" // Here
    item-value="name"
    @update:options="loadItems"
  >

Then I have a function like the following, which triggers the loadItems() on @update:options

function triggerFetch() {
    search.value = String(Date.now())
}

So I can use triggerFetch in my watcher or wherever.
For example I use it in a watcher for route.params.

watch(() => route.params, (newValue) => {
    if (newValue.login) {
        triggerFetch()
    }
}, { immediate: true })

and in the loadItems I can get the actual login value for the api call like route.params.login

Maybe you can watch the model of your input and call something like triggerFetch? I used this approach with input before also and worked fine.

If I understood your problem, I hope it helps

[ilyen85]

Hey, @Mmarin95 I did what I did because I wanted to load new results in the table when a user pick a new date span.

I need to have a separate button (that will open a date-range picker) where the user can select a start or end date or both. Then load the new table items based on the sorting options set in the table and the selected date range.

[Mmarin95]

I think we are doing the same, but I have an input in another component instead of a date picker.

Just I trigger my api call once I finish typing on that input. My call uses the ref bound to the input model instead of any prop to the table itself or anything that could trigger the table before I need. So, the table does not trigger on every key input.

But I never used debounce, so I may be missing something.

[SoheilHasankhani]

Hi,

I've come across a similar situation and found a workaround that might help you. The idea is to leverage the search property of the options object in VDataTableServer, which is passed untouched to the @update:options event.

Here's how you can do it:

1. Treat the search property as a JSON string that includes your search query and any extra filters you want.
2. Modify this search property whenever you want to trigger a reload. This will cause the @update:options event to be triggered, giving you access to all the options properties required for your API call.

Here's a code snippet that illustrates this approach:

<template>
  <v-data-table-server
      :search="searchJson"
      @update:options="refresh"
  />
</template>

<script>
export default {
  data () {
    return {
      searchObject: {
        query: 'foo',
        fromDateFilter: Date(),
        toDateFilter: Date(),
        anyExtraFilter: 'bar'
      }
    }
  },
  computed: {
    searchJson () {
      return JSON.stringify(this.searchObject)
    }
  },
  methods: {
    refresh (options) {
      const {
        page,
        itemsPerPage,
        sortBy,
        groupBy,
        search
      } = options
      const {
        query,
        fromDateFilter,
        toDateFilter,
        anyExtraFilter
      } = JSON.parse(search)
      // perform api call using all required parameters
    }
  }
}
</script>

In this code, searchJson is a computed property that returns the stringified version of searchObject. Whenever searchObject changes, searchJson will update, triggering the @update:options event.

Moreover, you can even bind searchObject values (for example fromDateFilter) to any component you wish (for example datePicker). This way, any changes in the component will automatically update the searchObject and trigger the @update:options event.

[milerjanek]

In my project I have a different approach:

<template>
  <v-data-table-server :v-model:options="options" @update:options="load" />
</template>

<script setup>
const options = ref({
    page: 1,
    itemsPerPage: 10
})

async function load({ page, itemsPerPage, sortBy }) {
    // api call
}

async function refresh() {    
  await load(options.value)
}
</script>