Pagination with Javascript

I have created pagination with pure JavaScript data is coming from array of objects which are static but we can use data from server or api. Currently 10 object per page is showing we can change it according our requirement.You can see in console starting point and the end point of showing data on pages.
Demo


<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>JavaScript Pagination</title>
 
  </head>
  <body>
	 <div class="container">
      <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
          <th>Gender</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="tableBody">
     
    </tbody>
  </table>
    <ul id="pagination" class="pagination">
 </ul>
    </div>
  </body>
 	<script src="app.js">
	</script>
  </body>
</html>
JavaScript of App
var PAGINATIONController = (function() {
    var data = [{
        "id": 1,
        "first_name": "Troy",
        "last_name": "Harmant",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "150.144.151.131"
    }, {
        "id": 2,
        "first_name": "Anders",
        "last_name": "Cariss",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "176.1.9.56"
    }, {
        "id": 3,
        "first_name": "Konstanze",
        "last_name": "Pridham",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "187.2.155.144"
    }, {
        "id": 4,
        "first_name": "Kaia",
        "last_name": "Scriver",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "11.94.171.170"
    }, {
        "id": 5,
        "first_name": "Constancy",
        "last_name": "Scolding",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "145.156.145.232"
    }, {
        "id": 6,
        "first_name": "Dagny",
        "last_name": "Froome",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "181.198.192.114"
    }, {
        "id": 7,
        "first_name": "Madison",
        "last_name": "Vasilenko",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "164.56.60.184"
    }, {
        "id": 8,
        "first_name": "Udale",
        "last_name": "Sandever",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "226.148.6.41"
    }, {
        "id": 9,
        "first_name": "Marne",
        "last_name": "Dederick",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "213.248.208.139"
    }, {
        "id": 10,
        "first_name": "Conrado",
        "last_name": "Faulder",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "146.175.47.233"
    }, {
        "id": 11,
        "first_name": "Howard",
        "last_name": "Haggata",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "13.21.32.109"
    }, {
        "id": 12,
        "first_name": "Karisa",
        "last_name": "Aimeric",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "66.23.76.220"
    }, {
        "id": 13,
        "first_name": "Mariette",
        "last_name": "Scotchmor",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "195.53.99.251"
    }, {
        "id": 14,
        "first_name": "Jackqueline",
        "last_name": "Duckers",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "226.58.170.240"
    }, {
        "id": 15,
        "first_name": "Kiel",
        "last_name": "Snadden",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "0.109.19.2"
    }, {
        "id": 16,
        "first_name": "Byrom",
        "last_name": "Farncombe",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "226.197.163.7"
    }, {
        "id": 17,
        "first_name": "Dacia",
        "last_name": "Zelner",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "39.123.199.51"
    }, {
        "id": 18,
        "first_name": "Scarface",
        "last_name": "Besse",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "250.132.60.47"
    }, {
        "id": 19,
        "first_name": "Alanna",
        "last_name": "Sollis",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "139.79.129.148"
    }, {
        "id": 20,
        "first_name": "Farlee",
        "last_name": "O'Corr",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "220.233.49.76"
    }, {
        "id": 21,
        "first_name": "Nadine",
        "last_name": "Grigson",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "145.185.124.113"
    }, {
        "id": 22,
        "first_name": "Bobbette",
        "last_name": "Hekkert",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "195.171.12.65"
    }, {
        "id": 23,
        "first_name": "Sharity",
        "last_name": "Chazette",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "68.113.204.89"
    }, {
        "id": 24,
        "first_name": "Carine",
        "last_name": "Cartwight",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "136.162.73.247"
    }, {
        "id": 25,
        "first_name": "Dennet",
        "last_name": "Whitwell",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "18.1.19.185"
    }, {
        "id": 26,
        "first_name": "Tracey",
        "last_name": "Paridge",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "146.217.196.28"
    }, {
        "id": 27,
        "first_name": "Quincey",
        "last_name": "Humm",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "117.93.200.202"
    }, {
        "id": 28,
        "first_name": "Sibley",
        "last_name": "Klimek",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "98.251.231.76"
    }, {
        "id": 29,
        "first_name": "Hildagarde",
        "last_name": "Erwin",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "161.109.123.67"
    }, {
        "id": 30,
        "first_name": "Thia",
        "last_name": "McVaugh",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "84.101.103.101"
    }, {
        "id": 31,
        "first_name": "Teodor",
        "last_name": "Rizzolo",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "126.13.27.219"
    }, {
        "id": 32,
        "first_name": "Issi",
        "last_name": "McCracken",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "148.114.96.125"
    }, {
        "id": 33,
        "first_name": "Elysee",
        "last_name": "Yellowley",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "182.168.254.247"
    }, {
        "id": 34,
        "first_name": "Mischa",
        "last_name": "Alonso",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "112.165.109.127"
    }, {
        "id": 35,
        "first_name": "Leoline",
        "last_name": "Blant",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "251.9.107.218"
    }, {
        "id": 36,
        "first_name": "Michaella",
        "last_name": "Face",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "56.125.190.121"
    }, {
        "id": 37,
        "first_name": "Cristobal",
        "last_name": "Gamblin",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "131.84.151.87"
    }, {
        "id": 38,
        "first_name": "Salomon",
        "last_name": "Dugood",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "210.150.202.102"
    }, {
        "id": 39,
        "first_name": "Bruno",
        "last_name": "Stiegar",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "52.231.227.118"
    }, {
        "id": 40,
        "first_name": "Hillard",
        "last_name": "Glastonbury",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "29.190.99.148"
    }, {
        "id": 41,
        "first_name": "Dallas",
        "last_name": "Speechley",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "78.87.154.126"
    }, {
        "id": 42,
        "first_name": "Kristina",
        "last_name": "Borlease",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "243.39.198.63"
    }, {
        "id": 43,
        "first_name": "Mellicent",
        "last_name": "Manwell",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "72.62.224.101"
    }, {
        "id": 44,
        "first_name": "Donal",
        "last_name": "Giorgielli",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "33.246.47.237"
    }, {
        "id": 45,
        "first_name": "Iona",
        "last_name": "Garfield",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "161.31.121.56"
    }, {
        "id": 46,
        "first_name": "Gael",
        "last_name": "Piel",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "138.199.204.164"
    }, {
        "id": 47,
        "first_name": "Stacey",
        "last_name": "McDougle",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "124.78.225.32"
    }, {
        "id": 48,
        "first_name": "Gauthier",
        "last_name": "O'Brallaghan",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "98.247.38.117"
    }, {
        "id": 49,
        "first_name": "Claudio",
        "last_name": "Cancelier",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "144.128.225.215"
    }, {
        "id": 50,
        "first_name": "Alf",
        "last_name": "Borless",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "160.224.35.21"
    }, {
        "id": 51,
        "first_name": "Mackenzie",
        "last_name": "Croasdale",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "212.182.145.60"
    }, {
        "id": 52,
        "first_name": "Catha",
        "last_name": "Fielden",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "209.107.63.122"
    }, {
        "id": 53,
        "first_name": "Clarabelle",
        "last_name": "Paddingdon",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "47.226.211.234"
    }, {
        "id": 54,
        "first_name": "Teodorico",
        "last_name": "Glading",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "148.14.34.35"
    }, {
        "id": 55,
        "first_name": "Nikolia",
        "last_name": "Bovis",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "56.75.207.60"
    }, {
        "id": 56,
        "first_name": "Prudy",
        "last_name": "Nickolls",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "9.253.191.123"
    }, {
        "id": 57,
        "first_name": "Marthena",
        "last_name": "Kaesmans",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "77.210.164.156"
    }, {
        "id": 58,
        "first_name": "Trixy",
        "last_name": "Thynne",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "27.219.33.11"
    }, {
        "id": 59,
        "first_name": "Cleve",
        "last_name": "Ephgrave",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "135.128.176.135"
    }, {
        "id": 60,
        "first_name": "Claudio",
        "last_name": "Pincott",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "6.28.18.54"
    }, {
        "id": 61,
        "first_name": "Derry",
        "last_name": "Shaughnessy",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "139.171.170.14"
    }, {
        "id": 62,
        "first_name": "Laraine",
        "last_name": "Chesterfield",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "95.107.189.132"
    }, {
        "id": 63,
        "first_name": "Sullivan",
        "last_name": "Shovlin",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "97.189.130.150"
    }, {
        "id": 64,
        "first_name": "Terrell",
        "last_name": "Windross",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "93.38.72.60"
    }, {
        "id": 65,
        "first_name": "Benoite",
        "last_name": "Cattrall",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "192.28.229.76"
    }, {
        "id": 66,
        "first_name": "Torey",
        "last_name": "Laight",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "22.101.172.41"
    }, {
        "id": 67,
        "first_name": "Corena",
        "last_name": "Woodus",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "184.219.209.116"
    }, {
        "id": 68,
        "first_name": "Malena",
        "last_name": "Greensted",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "229.244.102.241"
    }, {
        "id": 69,
        "first_name": "Benny",
        "last_name": "Jewel",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "72.131.206.251"
    }, {
        "id": 70,
        "first_name": "Tallulah",
        "last_name": "Malthouse",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "243.77.23.83"
    }, {
        "id": 71,
        "first_name": "Reynard",
        "last_name": "Glowinski",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "62.230.123.2"
    }, {
        "id": 72,
        "first_name": "Amara",
        "last_name": "Nend",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "97.89.8.147"
    }, {
        "id": 73,
        "first_name": "Gaby",
        "last_name": "Dermott",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "247.131.68.112"
    }, {
        "id": 74,
        "first_name": "Paule",
        "last_name": "Dobing",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "217.113.134.208"
    }, {
        "id": 75,
        "first_name": "Sheffield",
        "last_name": "Sammon",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "7.48.2.233"
    }, {
        "id": 76,
        "first_name": "Marcelle",
        "last_name": "Letessier",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "81.134.89.14"
    }, {
        "id": 77,
        "first_name": "Lukas",
        "last_name": "Keohane",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "115.34.240.111"
    }, {
        "id": 78,
        "first_name": "Chuck",
        "last_name": "McIlriach",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "192.106.4.42"
    }, {
        "id": 79,
        "first_name": "Maribelle",
        "last_name": "Kerwick",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "164.224.78.217"
    }, {
        "id": 80,
        "first_name": "Bari",
        "last_name": "Heminsley",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "144.144.185.66"
    }, {
        "id": 81,
        "first_name": "Selinda",
        "last_name": "Toun",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "246.219.52.83"
    }, {
        "id": 82,
        "first_name": "Orelie",
        "last_name": "Elies",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "250.8.189.99"
    }, {
        "id": 83,
        "first_name": "Jeannine",
        "last_name": "Paolillo",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "24.81.238.78"
    }, {
        "id": 84,
        "first_name": "Concordia",
        "last_name": "Gummow",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "123.219.122.48"
    }, {
        "id": 85,
        "first_name": "Katuscha",
        "last_name": "Mation",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "237.64.126.41"
    }, {
        "id": 86,
        "first_name": "Waiter",
        "last_name": "Pimlock",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "23.1.202.133"
    }, {
        "id": 87,
        "first_name": "Ignace",
        "last_name": "Hymus",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "49.138.47.224"
    }, {
        "id": 88,
        "first_name": "Bliss",
        "last_name": "Studd",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "42.73.232.215"
    }, {
        "id": 89,
        "first_name": "Livvy",
        "last_name": "Gounard",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "32.146.69.133"
    }, {
        "id": 90,
        "first_name": "Hally",
        "last_name": "Albone",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "228.21.225.250"
    }, {
        "id": 91,
        "first_name": "Leigh",
        "last_name": "Rudham",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "221.116.199.128"
    }, {
        "id": 92,
        "first_name": "Levy",
        "last_name": "Gourlie",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "124.172.151.158"
    }, {
        "id": 93,
        "first_name": "Inglis",
        "last_name": "Arias",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "227.149.15.239"
    }, {
        "id": 94,
        "first_name": "Jesus",
        "last_name": "Mucklestone",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "34.115.28.90"
    }, {
        "id": 95,
        "first_name": "Lindie",
        "last_name": "Madine",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "140.76.252.233"
    }, {
        "id": 96,
        "first_name": "Kaile",
        "last_name": "Brauns",
        "email": "[email protected]",
        "gender": "Female",
        "ip_address": "230.143.114.62"
    }, {
        "id": 97,
        "first_name": "Zechariah",
        "last_name": "Lescop",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "198.212.184.219"
    }, {
        "id": 98,
        "first_name": "Hort",
        "last_name": "Dennick",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "51.203.160.60"
    }, {
        "id": 99,
        "first_name": "Kaine",
        "last_name": "Kemston",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "117.1.168.26"
    }, {
        "id": 100,
        "first_name": "Vic",
        "last_name": "Shipston",
        "email": "[email protected]",
        "gender": "Male",
        "ip_address": "15.224.253.180"
    }];
    return {
        returnData: function() {
            return data
        },
        testing: function() {
            return data
        },
    }
})();
//UI CONTOLLER MODULE
var UIController = (function() {
    var DOMStrings = {
        numberId: '#pagination',
        tableBody: '#tableBody'
    };
    return {
        addRow: function(startNum, obj) {
            var startNum, endValue, valueInArray;
            startNum = (startNum - 1) * 10;
            endValue = startNum + 9;

            console.log("Starting value " + startNum)
            console.log("Ending value " + endValue)
            valueInArray = [];
            for (i = startNum; i <= endValue; i++) {

                valueInArray.push(i)
            }
            console.log(valueInArray)
            for (i = 0; i <= obj.length; i++) {
                if (i < obj.length) {
                    if (valueInArray.includes(i)) {

                        dynamicHtml = '<tr><td> ' + obj[i].first_name + ' </td><td> ' + obj[i].last_name + ' </td><td> ' + obj[i].email + '</td><td>' + obj[i].id + '</td></tr>';
                        document.querySelector(DOMStrings.tableBody).insertAdjacentHTML('beforeend', dynamicHtml);
                    }
                }
            }
        },
        addNumber: function(numOfRows, totalRow) {
            var totalPagination = Math.ceil(totalRow / numOfRows);
            for (i = 1; i <= totalPagination; i++) {
                dynamicHtml = '<li class="page-item">' + i + '</li>';
                document.querySelector(DOMStrings.numberId).insertAdjacentHTML('beforeend', dynamicHtml);
            }
        },
        removeRow: function() {
            //alert('remove')
            var parent = document.querySelector(DOMStrings.tableBody)
            var child = parent.querySelectorAll('tr');
            for (i = 0; i < child.length; i++) {
                //console.log(i)
                parent.removeChild(child[i]);
            }
        },
        getDOMstrings: function() {
            return DOMStrings;
        }
    }
})();
//APP CONTOLLER MODULE
//Connecting UI and PAGINATION MODULE WITH APP CONTOLLER
var APPController = (function(PAGICtrl, UICtrl) {
    var setUpEventListners = function() {
        var DOM = UICtrl.getDOMstrings();
        document.querySelector(DOM.numberId).addEventListener('click', changeNumber);
    };
    var changeNumber = function(event) {
        UICtrl.removeRow();
        itemID = event.target.text;
        //console.log(itemID)
        //itemID =  itemID *  2;
        UICtrl.addRow(parseInt(itemID), obj)
    }
    var obj = PAGICtrl.returnData();
    //console.log(obj.length)
    UICtrl.addRow(1, obj)
    UICtrl.addNumber(10, obj.length)
    return {
        init: function() {
            console.log('Application has started.');
            setUpEventListners();
        }
    };
})(PAGINATIONController, UIController);
APPController.init();

5 thoughts on “Pagination with Javascript

  1. Madalynn

    I was wondering if anyone knows what happened to Dime Piece LA celebrity streetwear brand? I seem to be unable to proceed to the checkout on Dimepiecela site. I have read in GQ that they were acquired by a UK hedge fund for $50 million. I’ve just bought the Dimepiece Do You Faux Suede Square Pillow from Ebay and absolutely love it xox

Leave a Reply

Your email address will not be published. Required fields are marked *