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 Appvar 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]bly.com",
"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();