api - Datatable 未显示带有 api 获取的 vuejs 代码中使用的数据

Question

需要html页面中vuejs数据表的示例代码，从api获取，需要显示搜索框和分页。

标签： apivue.jssearchdatatablepagination

Answer 1

 var app = new Vue({
  el: '#app',
  data: {
      search: '',
      list: [],
      pageSize: 3,
      currentPage: 1
  },
  mounted() {
    axios
      .get('https://thegreen.studio/ecommerce/E-CommerceAPI/E-CommerceAPI/AI_API_SERVER/Api/Order/GetOrderTestAll.php')
      .then(response => (this.list = response.data.body))
  },
  methods: {
    nextPage () {
      if ((this.currentPage * this.pageSize) < this.list.length) this.currentPage++;
    },
    prevPage () {
      if (this.currentPage > 1) this.currentPage--;
    }
  },
  computed: {
    lists () {
      var self = this;
      return this.list.filter(function (item1) {
      return item1.BuyerName.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
          || item1.BuyerPhoneNo.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
          || item1.BuyerEmail.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
          || item1.BuyerHouseNo.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
          || item1.BuyerState.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
          || item1.OrderPlacedOn.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
      });
    }
  }
});

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://unpkg.com/vue@2.1.8/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginate/2.1.0/index.js"></script>

<div id="app" class="container" style="width:1000px;margin-left:80px;">
<br />
<br />
<input type="text" class="form-control" v-model="search" placeholder="search" />
<br />
<br />
<table id="tbllist" class="table table-striped  table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone No</th>
      <th>Email</th>
      <th>House No</th>
      <th>Address 1</th>
      <th>Address 2</th>
      <th>Address 3</th>
      <th>Address 4</th>
      <th>Address 5</th>
      <th>PostCode</th>
      <th>City</th>
      <th>State</th>
      <th>Order Status</th>
      <th>Total Price</th>
      <th style="width:80px">Order Placed On</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in lists">
      <td>{{ item.BuyerName }}</td>
      <td>{{ item.BuyerPhoneNo }}</td>
      <td>{{ item.BuyerEmail }}</td>
      <td>{{ item.BuyerHouseNo }}</td>
      <td>{{ item.BuyerAddress1 }}</td>
      <td>{{ item.BuyerAddress2 }}</td>
      <td>{{ item.BuyerAddress3 }}</td>
      <td>{{ item.BuyerAddress4 }}</td>
      <td>{{ item.BuyerAddress5 }}</td>
      <td>{{ item.BuyerPostCode }}</td>
      <td>{{ item.BuyerCity }}</td>
      <td>{{ item.BuyerState }}</td>
      <td>{{ item.OrderStatus }}</td>
      <td>{{ item.TotalPrice }}</td>
      <td>{{ item.OrderPlacedOn }}</td>
    </tr>
  </tbody>
</table>
<p>
  <button @click="prevPage">Previous</button>
  <button @click="nextPage">Next</button>
</p>

page={{currentPage}}

</div>