Vuesax: Vuesax table sst (server side table) events not working

[diogoGrowin]

I guys. I am using vuesax template and library and when using vs-table i have a problem when try to use with sst events.

I use vs-table and the only event that work fine is the @selectd. I already try to use more events like @change-page, @search , @sort and none of theese works . I add the property :sst="true" like on the documentation but none of theese seams work to me.

The versions i am using are the following:

• OS: Linux Ubuntu 18.04
• Node.js version: v10.16.3
• Vuesax version: 3.8.75
• Browser version: google chrome 77.0.3865.90
• Which package manager did you use for the install: npm package version 6.9.0
  -i am also ugin a vuesax template that my company client had bought .
  https://pixinvent.com/demo/vuesax-vuejs-admin-dashboard-template/landing/

I just try to use the following code in resume:

:sst="true"
@search="handleSearch"
@change-page="handleChangePage"
@sort="handleSort"
v-model="selected"
:total="totalItems"
pagination
max-items="3"
search
:data="users">

....
methods:{
handleSearch(searching) {
alert("cenas");
let _print = The user searched for: ${searching}\n
this.$refs.pre.appendChild(document.createTextNode(_print))
},
handleChangePage(page) {
alert("cenas");
let _print = The user changed the page to: ${page}\n
this.$refs.pre.appendChild(document.createTextNode(_print))
},
handleSort(key, active) {
alert("cenas");
let _print = the user ordered: ${key} ${active}\n
this.$refs.pre.appendChild(document.createTextNode(_print))
}
}

The table are rendered correctly and display all data and features, but the sst events don't work at all.

Hope someone can help me.
Regards

[kpsahani]

same issue, my pagination not show more then one even :total="15" and max-items="5"

[smccoy78]

I am having the same issue with the pagination. Vuetools shows total=193 and maxItems = 10 but getTotalPages still = 1.

[rbsamiur]

Same issue, it doesn't rerender as it should and it doesn't work while getting paginated data from server side

[radcloudcorp]

I am experiencing the same problem, pagination does not work.

[jwn25]

I also followed the Documentation on official website. Unfortunately the table did not load new data on pagination change.
Then I tried to implement pagination component separately and is working perfectly fine.

STEPS

• Removed pagination attribute from vs-table component
• Added pagination component separately
  <vs-pagination class="mt-4" :total="contacts.last_page" v-model="table_options.current_page"></vs-pagination>

 data() {
    return {
      contacts: {
        data: [],
        per_page: 0,
        total: 0,
        last_page: 0,
      },
      table_options: {
        current_page: 1,
      }, 
    };
  },

FETCHING DATA FROM API

  async fetchContacts() {
      try {
        let response = await this.$http.get(
          `/api/admin/contact-inquiries?page=${this.table_options.current_page}`
        );
        this.contacts = response.data.data;
      } catch (error) {
        this.errorNotification("Something went wrong!! Please retry");
      } 
    },

WATCH PAGINATION CHANGE

 watch: {
    "table_options.current_page": function () {
      this.fetchContacts();
    },
  },

[rbsamiur]

@jwn25 I tried the same thing bt that eliminates the vs-table serach option.

[jwn25]

@jwn25 I tried the same thing bt that eliminates the vs-table serach option.

@rbsamiur What I did for search is added one variable called search_keyword inside table_options

```
data() {
return {
contacts: {
data: [],
per_page: 0,
total: 0,
last_page: 0,
},
table_options: {
current_page: 1,
search_keyword: ''
},
};
},

Added same watcher for keyword

watch: {
"table_options.search_keyword": function () {
this.fetchContacts();
},
},

Updated API call Like this

let response = await this.$http.get(
/api/admin/contact-inquiries?page=${this.table_options.current_page}&search=${this.table_options.search_keyword}
);
```

And handled rest of the processes on server side. (i.e check if keyword is set or not)