Datatable is not showing data used in vuejs code with api fetching - api

Question

Need Sample code for vuejs Datatable in html page, getting from api and need to show search box and pagination.

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>