Pagination like Gmail

What is Pagination?

Pagination basically is sequence of data or you can say sequence of pages which is display on webpage.
If You have a lot of data inside of table then you can split tha data and you can show data according to you.

I am taking the pagintaion example that how is pagination work. if you want to show 5 row or 5 slides on Webpage and if you have a 1000 data but if you don't use pagination then it will take more load time to showing data and it will not user friendly on Webpage.

How can you decrease the load time and create user friendly web page then you need to development pagination and it is best solution for showing correct data on webpage.

Process of Pagination

You can set range of data or say split the data on table and display 5 data or 5 row at a time and click to next button for another 5 row. that process will work in your range for fetch data in less time. I will show the process below how can you do pagination like gmail.

Adding CSS

You will add the css for pagintaion style also you can disign according to your style

<style> .pagination_new .pagination_counter a{ color: black; text-align: center; padding: 10px 2px; text-decoration: none; font-size: 14px; } .pagination_new .pagination_click a{ color: black; text-align: center; padding: 10px 6px; text-decoration: none; font-size: 14px; } .pagination_new .pagination_click { margin-left:20px; } #customers { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; margin-top:80px; } #customers td, #customers th { border: 1px solid #ddd; padding: 8px; } #customers tr:nth-child(even){background-color: #f2f2f2;} #customers tr:hover {background-color: #ddd;} #customers th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; }

Adding HTML code

Here i am writing html code for pagination and It will show first , next and total count with prev and next button like pagination of gmail

NOTE : As you can see gmail styling they have less then and greater then sign button and i change to prev and next , you can keep the same button like gmail.

<h2>User Details </h2> <form method="POST" action="."> <div class="pull-right pagination_new" style="display:flex;float:right;"> <div class="pagination_counter"> <a style="cursor: alias;" id="prev_count">0</a> <a style="cursor: alias;">-</a> <a style="cursor: alias;" id="next_count">5</a> <a style="cursor: alias;">of</a> <a style="cursor: alias;" id="total_count">5</a> </div> <div class="pagination_click"> <a href="#" class="pagination_prev">Prev</a> <a href="#" class="pagination_next">Next</a> </div> </div> </form> <table id="customers"> <thead> <tr> <th>Username</th> <th>Code</th> <th>Email</th> <th>Mobile</th> </tr> </thead> <tbody class="display_data"></div> </tbody> </table>

Adding JS

I mention all logic of pagination in javascript and JQuery and i have commented on each function name and it is simple and easy to understand that how is work pagination like gmail.

<script> // showing data table_data = function(data){ var ddata = "" for(i=0; i<data.length; i++ ){ ddata = ddata + "<tr> <td>"+data[i]['username']+"</td> <td>"+data[i]['code']+"</td><td>"+data[i]['email']+"</td> <td>"+data[i]['mobile']+"</td></tr>" } return ddata; } // ajax call for fetch the data from backend ajax_call = function(prev_count, next_count){ $.ajax({ type:"POST", url:"/user/details/", data:{"prev_count":prev_count, "next_count":next_count}, success:function(resp){ var data = JSON.parse(resp) $("#next_count").html(data["next_count"]) $("#prev_count").html(data["prev_count"]) $("#total_count").html(data["total_count"]) $(".display_data").html(table_data(data["data"])) var total_count = parseInt($("#total_count").html()) if (next_count > total_count){ $("#next_count").html(total_count) $(".pagination_next").prop( "disabled", false ); } } }); return true } // first time calling when you open the page $( document ).ready(function() { var prev_count = $("#prev_count").html() var next_count = $("#next_count").html() ajax_call(prev_count, next_count) }); // click next button $(".pagination_next").click(function() { var prev_count = $("#prev_count").html() var next_count = $("#next_count").html() var total_count = $("#total_count").html() prev_count = parseInt(prev_count) total_count = parseInt(total_count) next_count = parseInt(next_count) if (next_count == total_count){ $("#next_count").html(last_count) $(".pagination_next").prop( "disabled", true ); return false; } var prev_count = prev_count + 5 var next_count = prev_count + 5 ajax_call(prev_count, next_count) }); // click next button $(".pagination_prev").click(function() { var prev_count = $("#prev_count").html() prev_count = parseInt(prev_count) if (prev_count == 1 || prev_count == 0){ $(".pagination_prev").prop( "disabled", true ); return false; } var prev_count = prev_count - 5 var next_count = prev_count + 5 ajax_call(prev_count, next_count) }); </script>

Backend code

I write below code in python and here i am receiving two counts one is prev and second is next count and also you can see logic of showing range of data for pagination.

NOTE : you can choose anyone language for backend . just you have to keep logic for split data.

from django.shortcuts import render from django.http import HttpResponse from django.views.decorators.csrf import csrf_exempt import json from first_apps.models import UserMaster @csrf_exempt def user_details(request): if request.POST: prev_count = request.POST["prev_count"] next_count = request.POST["next_count"] user_master = UserMaster.objects.all() user = user_master[int(prev_count):int(next_count)] total_count = user_master.count() data = [] for u in user: dic = {} dic["username"] = u.user.username dic["code"] = u.code dic["name"] = u.firstname dic["email"] = u.email dic["mobile"] = u.mobile data.append(dic) resp = {} resp["success"] = True resp["msg"] = "success" resp["data"] = data resp["prev_count"] = prev_count resp["next_count"] = next_count resp["total_count"] = total_count payload = json.dumps(resp) return HttpResponse(payload) else: return render(request,"first_apps/user_details.html")

The Result is something like this :

How to get lat long from address