How to create Pagination with vue-table2?

Question

I'm using the Vue-table2 for rendering the table. https://github.com/ratiw/vuetable-2

 <vuetable ref="vuetable"
                    :api-url= "apiurl"
                    :fields="fields">
                  </vuetable>

My Server Api Response doesn't have any Pagination response in it . The data returned by server is

{
   "data":[
      {
         "id":22535,
         "message":"Message1",
         "message_type":"tag1",
         "time":"2018-08-13T14:41:57Z",
         "username":"rahuln"
      },
      {
         "id":22534,
         "message":"Message2",
         "message_type":"tag2",
         "time":"2018-08-13T14:02:27Z",
         "username":"govindp"
      },
      ..................
   ],
   "error":null,
   "success":true
}

This is the first time I'm Using Vue-js. How can i add the pagination into it and still using vue-table2. Thanks In advance.

Answer 1

Since you don't have pagination values you must insert it we gonna trick vue-table like this

<template>
    <div>
        <vuetable ref="vuetable" api-url="/api/ahmed" :fields="fields" pagination-path="" @vuetable:pagination-data="onPaginationData" @vuetable:load-success="loadSuccess">
        </vuetable>
        <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
    </div>
</template>

<script>
    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
    export default {
        components: {
            Vuetable,
            VuetablePagination,
        },
        data() {
            return {
                fields: ['name', 'email', 'birthdate', 'nickname', 'gender', '__slot:actions'],
                allData: false,
                currentPage: 1,
            }
        },
        mounted() {

        },
        methods: {
            onPaginationData(paginationData) {

                this.$refs.pagination.setPaginationData(paginationData)
            },
            loadSuccess(data) {

                this.$refs.vuetable.$nextTick(()=>{
                    if (!this.allData) {

                        this.allData = data;
                    }
                    if (!data.data.per_page) {
                        data = this.setData(this.currentPage);
                        this.$refs.vuetable.loadSuccess(data);
                    }
                })



            },
            setData(Page) {

                var data = JSON.parse(JSON.stringify(this.allData));
                var total = data.data.data.length;
                var perPage = 10;
                var currentPage = Page;
                var lastPage = parseInt(total / perPage) + ((total % perPage) === 0 ? 0 : 1)
                var from = parseInt((currentPage - 1) * perPage) + 1;
                var to = from + perPage - 1;

                to = to > total ? total : to;
                console.log(from,to)
                var newData = this.allData.data.data.filter(function(element, index) {

                    if (index >= from-1 && index <= to-1) {
                        console.log(index,from,to)
                        return true;
                    }

                    return false;
                })
                // console.log(newData)
                // return newData;

                data.data = {
                    "total": total,
                    "per_page": perPage,
                    "current_page": currentPage,
                    "last_page": lastPage,
                    "next_page_url": "",
                    "prev_page_url": null,
                    "from": from,
                    "to": to,
                    data: newData

                }
                // console.log(data)
                this.currentPage = Page;
                this.$refs.vuetable.loadSuccess(data);
                return data;
            },
            onChangePage(page) {


                this.setData(page);
            }
        }
    }
</script>