search

ratiw / vuetable-2

data table simplify! -- datatable component for Vue 2.x. See documentation at
https://vuetable.com
MIT License
2.16k stars 400 forks source link

Vuetable-2 can not change page #696

Open ginbarca opened 4 years ago

ginbarca commented 4 years ago

Here is my code vue:

<template>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid">
                <h1 class="mt-4">Dashboard</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
                <div class="row">
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-primary text-white mb-4">
                            <div class="card-body">Primary Card</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">View Details</a>
                                <div class="small text-white">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-warning text-white mb-4">
                            <div class="card-body">Warning Card</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">View Details</a>
                                <div class="small text-white">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-success text-white mb-4">
                            <div class="card-body">Success Card</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">View Details</a>
                                <div class="small text-white">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-danger text-white mb-4">
                            <div class="card-body">Danger Card</div>
                            <div class="card-footer d-flex align-items-center justify-content-between">
                                <a class="small text-white stretched-link" href="#">View Details</a>
                                <div class="small text-white">
                                    <i class="fas fa-angle-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-chart-area mr-1"></i>
                                Area Chart Example
                            </div>
                            <div class="card-body">
                                <canvas id="myAreaChart" width="100%" height="40"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-chart-bar mr-1"></i>
                                Bar Chart Example
                            </div>
                            <div class="card-body">
                                <canvas id="myBarChart" width="100%" height="40"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table mr-1"></i>
                        DataTable Example
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <client-only>
                                <vuetable
                                    ref="vuetable"
                                    :http-options="httpOptions"
                                    :fields="fields"
                                    data-path="data.list"
                                    :query-params="getParam"
                                    pagination-path
                                    @vuetable:pagination-data="onPaginationData"
                                ></vuetable>
                                <div style="padding-top:10px">
                                    <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
                                </div>
                            </client-only>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <Footer />
    </div>
</template>

<script>
import Footer from "../components/footer";
import { Vuetable, VuetablePagination } from "vuetable-2";
import UserTableFieldsDef from "../utils/UserTableFieldsDef.js";
import axios from "axios";

export default {
    layout: "layout",
    components: {
        Footer,
        Vuetable,
        VuetablePagination,
    },
    data() {
        return {
            errors: [],
            fields: UserTableFieldsDef,
            perPage: 10,
            httpOptions: {},
            currentSort: {},
        };
    },
    mounted() {
        this.httpOptions = {
            baseURL: process.env.API_URL_AWS + "/api/users",
            headers: {
                Authorization: localStorage["auth._token.local"],
            },
        };
    },
    watch: {
        // getSortParam() {
        //  this.$refs.vuetable.refresh();
        // },
    },
    methods: {
        getParam(sortOrder, pagination) {
            this.currentSort = sortOrder;
            let sortObj = { page: pagination };
            if (sortOrder.length > 0) {
                (sortObj.sort =
                    sortOrder[0].field === "id"
                        ? "_" + sortOrder[0].field
                        : sortOrder[0].field),
                    (sortObj.type = sortOrder[0].direction);
            }
            return sortObj;
        },
        onPaginationData(paginationData) {
            let resultPaginationData = {
                total: paginationData.data.total,
                per_page: this.perPage,
                current_page: paginationData.data.current,
                last_page: Math.ceil(paginationData.data.total / this.perPage),
                next_page_url: "",
                prev_page_url: "",
                data: paginationData,
            };
            this.$refs.pagination.setPaginationData(resultPaginationData);
        },
        onChangePage(page) {
            // this.getParam(this.currentSort, page);
            this.$refs.vuetable.gotoPage(page);
        },
    },
};
</script>

my website is mysite.com/api/users/?page=1&sort=id&type=asc, i save in .env file. when send request, i include jwt authorization in header. my issue is i can not go to other page when i click page number. it's nothing happen. i want to change my params whenever i click to page number. here is my response data:

{
    "errorCode":0,
    "message":"Successfully",
    "data":{
        "list":[
            {
                "id":"5f511f5a63bc42006874a0b6",
                "name":"saasdf",
                "email":"aasfdsffffa3@aaa.com"
            },
            {
                "id":"5f511f5263bc42006874a0b5",
                "name":"ss",
                "email":"aasssssa3@aaa.com"
            },
            {
                "id":"5f511f4a63bc42006874a0b4",
                "name":"113",
                "email":"aaasdf3asfd@aaa.com"
            },
            {
                "id":"5f511f4363bc42006874a0b3",
                "name":"sadf asdf",
                "email":"aaa3asd@aaa.com"
            },
            {
                "id":"5f511f3c63bc42006874a0b2",
                "name":"ffff",
                "email":"aaa3ff@aaa.com"
            },
            {
                "id":"5f511f2e63bc42006874a0b1",
                "name":"sgsg sdfg",
                "email":"aaaqwe3@aaa.com"
            },
            {
                "id":"5f511f2663bc42006874a0b0",
                "name":"afsg sdg",
                "email":"aaa311@aaa.com"
            },
            {
                "id":"5f4dbbac08445c010d10138e",
                "name":"Hung Cuong",
                "email":"yotoko@gmail.com"
            },
            {
                "id":"5f4c59c17e2a780091a496ec",
                "name":"test23",
                "email":"aaa23@aaa.com"
            },
            {
                "id":"5f4c54b4dbbf0f006c312e96",
                "name":"test3",
                "email":"aaa3@aaa.com"
            }
        ],
        "current":1,
        "pages":1,
        "total":12
    }
}

sorry for my english

ginbarca commented 4 years ago

help me. I need soon please