Paginate Data

app.py

@@ -1,6 +1,7 @@
 from flask import Flask, render_template, request, json, Response
 from flask_sqlalchemy import SQLAlchemy
 from marshmallow import fields, Schema
+import math
 
 app = Flask(__name__)
 app.secret_key = 'super-secret-key'
@@ -28,10 +29,15 @@ class UserSchema(Schema):
 def home():
     return render_template('index.html')
 
-@app.route("/loaddata")
+@app.route("/loaddata", methods = ['POST'])
 def lodadata():
+    data = request.get_json()
+    page_num = data['page_num']
     users = User.query.filter_by().all()
-    data = user_schema.dump(users,many=True)
+    total_pages = math.ceil(len(users)/5)
+    users_data = users[(int(page_num)-1)*int(5): (int(page_num)-1)*int(5)+ int(5)]
+    users_data = user_schema.dump(users_data, many=True)
+    data = {"users": users_data, "total_pages": total_pages, "page_num":page_num}
     return custom_response(data, 200)
 
 def custom_response(res, status_code):

static/css/style.css

@@ -176,3 +176,20 @@ h1{
   right: -15px;
   cursor: pointer;
 }
+
+#pagination{
+  text-align: center;
+  padding: 10px;
+}
+#pagination a{
+  background: #2980b9;
+  color: #fff;
+  text-decoration: none;
+  display: inline-block;
+  padding:5px 10px;
+  margin-right: 5px;
+  border-radius: 3px;
+}
+#pagination a.active{
+  background: #27ae60;
+}

templates/index.html

@@ -43,6 +43,9 @@ <h1>Flask REST API CRUD</h1>
 
           </tbody>
         </table>
+        <div id="pagination">
+
+        </div>
       </td>
     </tr>
   </table>
@@ -82,13 +85,20 @@ <h2>Edit Form</h2>
   $(document).ready(function(){
 
     // load data---------------------------------------------
-    function loaddata(){
+    function loaddata(page){
+      if (page == undefined){
+        page =1
+      }
       $("#load-table").html('');
       $.ajax({
         url : "/loaddata",
-        type : "GET",
+        // type : "GEt",
+        type : "POST",
+        data : JSON.stringify({page_num :page}),
+        dataType : "json",
+        contentType : "application/json; charset=utf-8",
         success : function(data){
-          $.each(data, function(key, value){
+          $.each(data.users, function(key, value){
             $("#load-table").append('<tr>'+
                 '<td class="center">'+ value.sno +'</td>'+
                 '<td>'+ value.name +'</td>'+
@@ -97,11 +107,27 @@ <h2>Edit Form</h2>
                 '<td class="center"><button class="delete-btn" id="delete" data-id="'+ value.sno +'">Delete</button></td>'+
             '</tr>');
           });
+          $("#pagination").html('');
+          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>");
+            }
+          }
         }
       });
     }
     loaddata();
 
+    // paginate data------------------------------------------
+    $(document).on("click","#pagination a",function(e) {
+      e.preventDefault();
+      var page_id = $(this).attr("id");
+
+      loaddata(page_id);
+    })
+
     function message(msg, status) {
       if (status == true){
         $('#error-message').hide();