table serverside pagination: ajax get data but not display

#394 I want have server side pagination in my project. template code is similar to https://bootstrap-vue.js.org/docs/components/table/#complete-example.

here is my js code:

watch: {
  currentPage: "getInfo"
},
methods: {
getInfo: function() {
      const vm = this;
      let params = {
        pageNo: this.currentPage,
        pageSize: this.perPage,
        flag: 0,
        po: vm.searchOrderNumber,
        styNum: vm.searchStyleNumber
      };
      axiosGet(api.getList, params).then(function(response) {
        // handle success
        let arr = response.data.list.map(list => {
          let poInfo = JSON.parse(list.poInfo);
          return {
            po: poInfo.po,
            procInstId: list.procInstId,
            styNum: poInfo.styNum,
            color: poInfo.color || "",
            typeNameList: poInfo.typeNameList || ""
          };
        });
        vm.items = arr;
        vm.totalRows = response.data.totalNum;
      });
    }
}

presume I am in page 1, and when I click page 2, the ajax was success, And I get the data of page 2(only page 2). But the data was not show because the data is considered belong to page 1.

I hope to add a prop seems like :serverside = “true”, to just display the items ajax give to itself. It is really no neccessary to pagination local again!

[tmorehouse]

The items provider function must return either an array directly, or a promise directly, or call a callback with the items array.

Since your return is inside a then, b-table will never receive you response.

methods: {
  getInfo: function(ctx, callback) {
      const vm = this;
      let params = {
        pageNo: ctx.currentPage,
        pageSize: ctx.perPage,
        flag: 0,
        po: vm.searchOrderNumber,
        styNum: vm.searchStyleNumber
      };
      axiosGet(api.getList, params).then(function(response) {
        // handle success
        let arr = response.data.list.map(list => {
          let poInfo = JSON.parse(list.poInfo);
          return {
            po: poInfo.po,
            procInstId: list.procInstId,
            styNum: poInfo.styNum,
            color: poInfo.color || "",
            typeNameList: poInfo.typeNameList || ""
          };
        });
        vm.totalRows = response.data.totalNum;
        callback(arr || []);
      });
    }
}

[cn3lfs]

Thank you for your help! This is my code, it works when using serverside pagination:

<template>
  <div class="home">
    <section class="container-fluid">
      <div>
        <b-table
          striped
          hover
          :items="getInfo"
          :per-page="perPage"
          :current-page="currentPage"
          :fields="fields"
          show-empty
          empty-text="没有数据"
        >
          <template slot="empty" slot-scope="scope">
            <h4>{{ scope.emptyText }}</h4>
          </template>
          <!-- A virtual column -->
          <template slot="index" slot-scope="data">{{
            data.index + 1
          }}</template>
          <template slot="actions" slot-scope="row">
            <b-button
              size="sm"
              @click="selectItem(row.item, row.index, $event.target)"
              class="mr-1"
              >选择</b-button
            >
          </template>
        </b-table>
        <b-row>
          <b-col class="my-1">
            <b-pagination
              v-model="currentPage"
              :total-rows="totalRows"
              :per-page="perPage"
              class="my-0"
            ></b-pagination>
          </b-col>
        </b-row>
      </div>
    </section>
  </div>
</template>

<script>
// @ is an alias to /src
import { axiosGet } from "@/api/axios-http";
import api from "@/api/api";

export default {
  name: "home",
  components: {},
  data() {
    return {
      items: [],
      fields: [
        {
          key: "index",
          label: "序号"
        },
        {
          key: "procInstId",
          label: "流程号"
        },
        {
          key: "styNum",
          label: "款号"
        },
        {
          key: "color",
          label: "颜色"
        },
        {
          key: "actions",
          label: "Actions"
        }
      ],
      totalRows: 1,
      currentPage: 1,
      perPage: 25
    };
  },
  methods: {
    getInfo: function(ctx, callback) {
      const vm = this;
      let params = {
        pageNo: ctx.currentPage,
        pageSize: ctx.perPage,
        flag: 0,
        po: vm.searchOrderNumber,
        styNum: vm.searchStyleNumber
      };
      axiosGet(api.getList, params).then(function(response) {
        // handle success
        let arr = response.data.list.map(list => {
          let poInfo = JSON.parse(list.poInfo);
          return {
            po: poInfo.po,
            procInstId: list.procInstId,
            styNum: poInfo.styNum,
            color: poInfo.color || "",
            typeNameList: poInfo.typeNameList || ""
          };
        });
        // vm.items = arr;
        vm.totalRows = response.data.totalNum;
        callback(arr || []);
      });
      return null;
    }
  },
};
</script>

Hope author can add the server side pagination,sort,filter example in the doc. I really don’t figure what items function for in the first time.

thank you!