Page

index.html

@@ -18,6 +18,12 @@
         <button class="btn btn-primary" type="button" @click="loadBooks">Livres</button>
       </div>
       <div class="table-responsive" v-if="books.length > 0">
+        <nav aria-label="Pages">
+          <ul class="pager">
+            <li class="previous" v-bind:class="{ disabled: page <= 1 }"><a href="#" @click="prevPage"><span aria-hidden="true">&larr;</span> Précédents</a></li>
+            <li class="next"><a href="#" @click="nextPage">Suivants <span aria-hidden="true">&rarr;</span></a></li>
+          </ul>
+        </nav>
         <table class="table table-striped">
           <tr>
             <th>Titre</th>

index.js

@@ -2,7 +2,9 @@ var app = new Vue({
   el: '#app',
   data: {
     books: [],
-    booksCount: 0
+    booksCount: 0,
+    page: 1,
+    perpage: 20
   },
   methods: {
     sendQuery: function(url, error, success) {
@@ -42,8 +44,19 @@ var app = new Vue({
     booksSuccess: function(resp) {
       this.books = resp;
     },
+    prevPage: function() {
+      if (this.page > 1) {
+        this.page--;
+        this.loadBooks();
+      }
+    },
+    nextPage: function() {
+      this.page++;
+      this.loadBooks();
+    },
     loadBooks: function() {
-      this.sendQuery('cgi-bin/bouquins/books', this.stdError, this.booksSuccess);
+      this.sendQuery('cgi-bin/bouquins/books?page=' + this.page + '&perpage=' + this.perpage,
+        this.stdError, this.booksSuccess);
     }
   },
   mounted: function() {