Extract data from the server using multiple api calls/Pagination

[sylvaincaillot]

First, thank you for this nice plugin. I have tried several datatables for Vue and I really like this one for its integration with Element-UI. However, I am trying to use the server-side capabilities and I am struggling to do so. I have a similar solution based on vue-tables-2 which works nice but I would like to do the same with vue-data-tables. For example, in my current solution, everything is integrated with v-server-table and each time I am clicking on my pagination buttons, a new API call is made in order to extract corresponding data including sorting, ordering, page number etc... In my case, a single http call would be impossible in term of performance as I have many records Is it something we can do with data-tables-server? I didn't find many good tutorials on this component.

Thank you for advice

Sylvain

[njleonzhang]

Have you read this doc? https://njleonzhang.github.io/vue-data-tables/#/serverData

[sylvaincaillot]

Thank you for your quick reply. yes I read this document and it looks like to me that i am in the free mode configuration. However, i am probably wrong but it looks like your are loading the 1000 records in a row and it doesn't seem to be additional actions when you click on pagination buttons at the bottom to extract further data.

Do you have a dictionary of parameters you send to the API like vue-tables2 (https://github.com/matfish2/vue-tables-2#server-side) or is it something you have to define in the querychange property?

I am a bit confused and would really like to make the datatables work with your plugin and Element-UI. Thank you again

S.

[njleonzhang]

i am probably wrong but it looks like your are loading the 1000 records in a row and it doesn't seem to be additional actions when you click on pagination buttons at the bottom to extract further data.

In free model, every time you click pagination, datatables emit a query-change event in this format:

Property	Desc	Type	format	possible value
type	indicate why the loadData function called	String	-	'init' 'sizeChange' 'pageChange' 'checkBoxChange' 'sortChange' 'customFilterChange'
page	current page of the table	number	-	-
pageSize	page size of the table	number	-	-
sortInfo	sort info of the table	Object	{   order,   prop }	order: 'ascending or descending'

Do you have a dictionary of parameters you send to the API like vue-tables2

It's your business to handle this change? In normal situation, you may send a http request to your server and get new data, then assign new data to datatables' data to refresh table. You can totally define the http request parameters according to your business logic in event handler.

I design the api in this way to make it as flexible as possible.

 loadData(info) {
      this.loading = true
      http({
         yourServerProp1: info.page,
         yourServerProp2: info.pageSize
      }, 1000)  
        .then(data => {
          this.data = data.data
          this.total = data.total
          this.loading = false
        })
        .catch(error => {
          this.loading = false
        })
    },

BTW, if you think the document make you confused, would you please help to revise?.... I am not native english speaker, so the doc in english may be not clear

[sylvaincaillot]

Thank for your help. I will continue exploring it. I had already setup already the loadData method but for the time being, it is never called when I am clicking on a pagination or doing a sorting, i have probably missed something. I like the flexibility of your plugin and not being obliged to use a strict syntax to interact with the API. Sorry for the disturbance, I get surprised when I saw the large and bold titles in your answer. ;)

S.

[njleonzhang]

I am happy to help. The title is just used to show the segment, no special meaning. You can read the doc and sample code, and try yourself.

[sylvaincaillot]

Thank you Your document is pretty clear.

This is where I am so far starting with the auto loading mode:

<template>
  <div>
    <data-tables-server :data="myRecords" :total="myTotalOfRecords" :load-data="loadData">
      <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" sortable="custom">
      </el-table-column>
    </data-tables-server>
  </div>
</template>

<script>

  import DataTablesServer from 'vue-data-tables'

  export default {
    components: {
      DataTablesServer
    },
    data () {
      return {
        myRecords: [],
        myTotalOfRecords: 0,
        titles: [{
          prop: 'type',
          label: 'Type'
        }, {
          prop: 'Name',
          label: 'Name'
        }, {
          prop: 'No',
          label: 'Number'
        }]
      }
    },
    methods: {
      loadData (queryInfo) {
        // console.log(queryInfo)
        return this.$http.get('trip/GetResultsPaged')
          .then(response => {
            this.myRecords = response.data.results
            this.myTotalOfRecords = response.data.results.totalRec
          })
          .catch(e => {
            this.myRecords = e
          })
      }
    }
  }
</script>

i know that my get works and returns my results and the total number of results. However the loadData method is never call while it should be at least for the 'init' call. What am I missing?

S.

[sylvaincaillot]

Ok all fixed. It has to be import { DataTablesServer } from 'vue-data-tables' and not import DataTablesServer from 'vue-data-tables'

I mistaken with the declaration for DataTables import DataTables from 'vue-data-tables'

Thank you again for your time S.