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": "gobra[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": "cfielden1f[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();

12 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

  2. Walter Mundy

    Its like you read my mind! You seem to know a lot about this, like you wrote thebook in it or something. I think that you could do with a few pics to drive the message home abit, but instead of that, this is fantastic blog. A fantasticread. I’ll definitely be back.

  3. Felisa Hind

    Hey There. I found your blog the use of msn. That is a really well written article.I will make sure to bookmark it and come back to readextra of your useful info. Thanks for the post. I will certainly comeback.

  4. Phillis

    Hmm is anyone else experiencing problems with the
    images on this blog loading? I’m trying to find out if
    its a problem on my end or if it’s the blog. Any feed-back would be greatly
    appreciated.

  5. Thurman Klus

    Admiring the persistence you put into your site and in depth information you present.It’s awesome to come across a blog every once in a while that isn’t the same oldrehashed material. Wonderful read! I’ve bookmarked your site and I’mincluding your RSS feeds to my Google account.

Leave a Reply

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