Theming With WP REST API - Part 16 - Simple Pagination

index.php

@@ -63,6 +63,17 @@
                 </div>
             </article>
         </div>
+
+        <div class="pagination">
+            <span>Page {{currentPage}} of {{allPages}}</span>
+            <button class="btn" v-on:click="getPosts(prev_page)" :disabled="!prev_page">
+                Previous
+            </button>
+
+            <button class="btn" v-on:click="getPosts(next_page)" :disabled="!next_page">
+                Next
+            </button>
+        </div>
     </div>
 
     <div class="single-preview" v-if="show" transition="postshow">

js/app.js

@@ -12,24 +12,57 @@ var postList = Vue.extend({
             filterBtnOpen: true,
             filterBtnClose: false,
             post:'',
-            show: false
+            show: false,
+            allPages: '',
+            prev_page: '',
+            next_page: '',
+            currentPage: ''
         }
     },
 
     ready: function(){
-        posts = this.$resource('/wp-json/wp/v2/posts?per_page=20');
+
         categories = this.$resource('/wp-json/wp/v2/categories');
-
-        posts.get(function(posts){
-            this.$set('posts', posts);
-        })
-
         categories.get(function(categories){
             this.$set('categories', categories);
         })
+
+        this.getPosts(1);
     },
 
     methods: {
+
+        getPosts: function(pageNumber){
+            posts = '/wp-json/wp/v2/posts?filter[posts_per_page]=6&page=' + pageNumber;
+
+            this.currentPage = pageNumber;
+
+            this.$http.get(posts).then(function(response){
+                this.$set('posts', response.data);
+                this.makePagination(response);
+            });
+        },
+
+        makePagination: function(data){
+            this.$set('allPages', data.headers('X-WP-TotalPages'));
+
+            //Setup prev page
+            if(this.currentPage > 1){
+                this.$set('prev_page', this.currentPage - 1);
+            } else {
+                this.$set('prev_page', null);
+            }
+
+            // Setup next page
+            if(this.currentPage == this.allPages){
+                this.$set('next_page', null);
+            } else {
+                this.$set('next_page', this.currentPage + 1);
+            }
+
+
+        },
+
         getThePost: function(id){
             var posts = this.posts;
 

sass/_homepage.scss

@@ -270,4 +270,42 @@
     width:100%;
     height:100%;
     background: rgba(black, .5);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Pagination
+|--------------------------------------------------------------------------
+*/
+
+.pagination{
+    padding:20px;
+    margin-bottom: 100px;
+    text-align: center;
+
+    span{
+        display: block;
+        margin-bottom: 20px;
+    }
+
+    .btn{
+        padding:10px;
+        text-align: center;
+        border:none;
+        background: #7BDBFF;
+        color: darken(#7BDBFF, 50%);
+        font-size: 16px;
+        font-weight: 700;
+        text-transform: uppercase;
+        font-family: Helvetica Neue, Arial, sans-serif;
+        border-radius:5px;
+        cursor: pointer;
+        width:200px;
+        outline: none;
+
+        &:disabled{
+            background: #ccc;
+            color: #999;
+        }
+    }
 }