Previous and next button

Author: jakbin

static/css/style.css

@@ -192,4 +192,19 @@ h1{
 }
 #pagination a.active{
   background: #27ae60;
+  pointer-events: none;
+  
+}
+.paginate-btn{
+  background: #2980b9;
+  color: white;
+  border: 0;
+  padding: 8px 10px;
+  margin-right: 5px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.disable-link{
+  background: #27ae60;
+  pointer-events: none;
 }

templates/index.html

@@ -43,8 +43,9 @@ <h1>Flask REST API CRUD</h1>
 
           </tbody>
         </table>
+        
         <div id="pagination">
-      
+          <button class="paginate-btn" id="previous">Previous</button>
         </div>
       </td>
     </tr>
@@ -87,7 +88,7 @@ <h2>Edit Form</h2>
     // load data---------------------------------------------
     function loaddata(page){
       if (page == undefined){
-        page =1
+        page = 1
       }
       $("#load-table").html('');
       $.ajax({
@@ -108,13 +109,24 @@ <h2>Edit Form</h2>
             '</tr>');
           });
           $("#pagination").html('');
+          if (data.page_num == 1){
+            $("#pagination").append('<button class="paginate-btn disable-link" id="previous">Previous</button>');
+          }else{
+            $("#pagination").append('<button class="paginate-btn" id="previous">Previous</button>');
+          }
+          
           for (let i = 1; i <= data.total_pages; i++) {
             if (i == data.page_num){
               $("#pagination").append("<a class='active' id="+i+" href=''>"+i+"</a>");
             }else{
               $("#pagination").append("<a class='' id="+i+" href=''>"+i+"</a>");
             }
           }
+          if (data.page_num == data.total_pages){
+            $("#pagination").append('<button class="paginate-btn disable-link" id="next">Next</button>');
+          }else{
+            $("#pagination").append('<button class="paginate-btn" id="next">Next</button>');
+          }
         }
       });
     }
@@ -128,6 +140,21 @@ <h2>Edit Form</h2>
       loaddata(page_id);
     })
 
+    $(document).on("click", "#previous", function(e){
+      e.preventDefault();
+      var page_id = Number($(".active").attr("id")) - 1 ;
+
+      loaddata(page_id);
+    })
+
+    $(document).on("click", "#next", function(e){
+      e.preventDefault();
+      var page_id = Number($(".active").attr("id")) + 1;
+
+      loaddata(page_id);
+    })
+
+    // show message-------------------------------------------
     function message(msg, status) {
       if (status == true){
         $('#error-message').hide();