adminPaging

app/Http/Controllers/BookingController.php

@@ -80,7 +80,7 @@ class BookingController extends Controller
 		$user = Auth::user(); 
 		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
         ->orderby('updated_at','desc')
-        ->get();
+        ->paginate(30);
 
 			// reformat to fit frontend structure 
 			foreach ($bookings as $booking) {

package.json

@@ -24,7 +24,7 @@
     "element-ui": "^2.4.4",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
-    "npm": "^6.0.1",
+    "npm": "^6.4.1",
     "popper.js": "^1.14.1",
     "sweetalert2": "^7.15.1",
     "vee-validate": "^2.1.0-beta.5",
@@ -47,7 +47,7 @@
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "cross-env": "^5.1.4",
     "eslint": "^4.19.1",
-    "laravel-mix": "^2.1.1",
+    "laravel-mix": "^2.1.14",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^3.11.0",
     "webpack-bundle-analyzer": "^2.13.1",

public/mix-manifest.json

@@ -4,4 +4,4 @@
     "/js/lang-en.31386792460363b93c17.js": "/js/lang-en.31386792460363b93c17.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
-}
+}

resources/assets/js/pages/admin/home.vue

@@ -47,6 +47,15 @@
       </el-table>
     </div>
   </el-row>
+  <div align="right">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
+    </div>
   <!-- Booking Table-end -->
   </div>
 </template>
@@ -61,7 +70,8 @@ export default {
       status: null,
       bookingTable: [
       ],
-      url: 'api/admin/booking',   
+      url: 'api/admin/booking', 
+      pagination: [],  
       loading_btn: false,
     }
   },
@@ -72,7 +82,9 @@ export default {
     getBooking() {
       let $this = this
       axios.get(this.url).then(response => {
-        this.bookingTable = response.data
+        this.bookingTable = response.data.data
+        $this.makePagination(response.data)
+
       })
     },
     RefreshBooking() {
@@ -80,7 +92,7 @@ export default {
       this.loading_btn = true
       axios.get(this.url).then(response => {
         this.loading_btn = false;
-        this.bookingTable = response.data
+        this.bookingTable = response.data.data
         this.$message({
           showClose: true,
           message: 'Booking is updated',
@@ -89,6 +101,20 @@ export default {
         })
       })
     },
+    makePagination(data){
+      let pagination ={
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      }
+      this.pagination = pagination
+      console.log(this.pagination)
+    },
+    fetchPaginateBooking(url) {
+      this.url = url
+      this.getBooking()
+    },
     filterHandlerStatus (value, row, column) {
       const status = row.track_status;
       if(value ==="Success")