server side

[nunob87]

Hello,

html <EasyDataTable no-hover v-model:items-selected="itemsSelected" :body-row-class-name="bodyRowClassNameFunction" alternating :search-field="['service_id', 'service_description']" :search-value="search" :headers="headers" :items="res" :buttons-pagination="true" rows-per-page-message="Limite" :server-items-length="serverOptions.total" v-model:server-options="serverOptions">

js

this.axios.get('api/services?limit=25&page=' + page + '&search=' + this.search + '&sortDesc=' + sortDesc + '&sortBy=' + sortBy').then((res) => {
        this.res = res.data.data
        this.serverOptions = {
          page: res.data.meta.current_page,
          rowsPerPage: res.data.meta.per_page,
          total: res.data.meta.total,
          sortBy: sortBy,
          sortType: sortDesc
        }

how to set up paging, searching, sorting on the server side.

I am not able to apply this https://hc200ok.github.io/vue3-easy-data-table-doc/features/server-side-paginate-and-sort.html

thanks

[casudinlix]

try it,

  <EasyDataTable
                    class="table-dark table-striped"
                    show-index
                    must-sort
                    :headers="headers"
                    :items="items"
                    v-model:server-options="serverOptions"
                    :server-items-length="serverItemsLength"
                    :loading="loading"
                  > </EasyDataTable>

<script setup>
import { ref, onMounted, watch } from 'vue'

import request from '@/helpers/index' // this costum helper, axios
const ApiUrl = import.meta.env.VITE_APP_API_URL // this my enpoind API base URI
const users = ref({})
const isFetching = ref(false)
const { get, deleteOption } = request()

const headers = [
  { text: 'Avatar', value: 'img' },
  { text: 'Nama', value: 'name' },
  { text: 'Email', value: 'email' },
  { text: 'Nomor Telepon', value: 'phone' },
  { text: 'Saldo', value: 'balance' },
  { text: 'Role', value: 'roles', width: 25 },
  { text: 'action', value: 'action' }
]
const items = ref([])
const loading = ref(false)
const serverItemsLength = ref(0)
const keyword = ref('')

const serverOptions = ref({
  page: 1,
  rowsPerPage: 10,
  sortBy: '',
  sortType: 'desc'
})

const fetchUsers = () => {
  if (isFetching.value) {
    return
  }

  isFetching.value = true
  loading.value = true

  const fetchData = async () => {
    try {
      const params = {
        page: serverOptions.value.page,
        limit: serverOptions.value.rowsPerPage,
        keyword: keyword.value, // this my costum param
        sortBy: serverOptions.value.sortBy,
        sortType: serverOptions.value.sortType,
        status: 3  // this my costum param
      }
      const API_URL = `${ApiUrl}/api/v1/users?${new URLSearchParams(params)}`
      const response = await get(API_URL)
      // console.log(response.data)
      users.value = response.data
      serverItemsLength.value = response.meta.total
      items.value = response.data
      loading.value = false
    } catch (error) {
      console.error(error)
    } finally {
      isFetching.value = false
    }
  }

  fetchData()
}

onMounted(() => {
  fetchUsers()
})
const cari = () => {
  //page
  serverOptions.value.page = 1
  fetchUsers()
}
watch(
  [serverOptions],
  () => {
    fetchUsers()
  },
  { deep: true }
)

</script>

My API reponse :

{
    "data": [
        {
            "name": "tuminal abas",
            "username": "tuminal_abas_107",
            "email": "tum@mail.com",
            "phone": "08658656865",
            "avatar": null,
            "facebook": null,
            "telegram": null,
            "google": null,
            "email_verified_at": null,
            "balance": 0,
            "is_active": 1,
            "token_api": null,
            "created_at": "2023-07-01T20:19:28.000000Z",
            "updated_at": "2023-07-01T20:19:28.000000Z",
            "deleted_at": null,
            "reff": null,
            "has_id": "p9r10gndl7",
            "roles": []
        },
 "meta": {
        "page": "1",
        "pages": 6,
        "perpage": "10",
        "total": 57,
        "sort": "desc",
        "field": "users.created_at"
    }
]

[seyfer]

good answer @casudinlix the only thing missing is that you do not explain how keyword is used in the template I guess it is a simple input with v-model you can add on top of the table. same for status in your case.

@HC200ok can be closed