Since implementing pagination code, my table can't sort by name anymore, nor can it add or delete content.
What am I doing wrong in this code?
Everything was working perfectly fine and then all of the sudden when I was about to turn in the project it stopped working.
I'm sure there is some small mistake that my newbie eyes can't detect..
'use strict'
let movieData = [{ "id": 1, "name": "Network", "genre": "Comedy|Drama", "rating": "68.22" },
{ "id": 2, "name": "Kommissarie Späck", "genre": "Comedy", "rating": "30.65" },
{ "id": 3, "name": "Pirate, The", "genre": "Adventure|Comedy|Musical|Romance", "rating": "98.22" },
{ "id": 4, "name": "Mary and Martha", "genre": "Drama", "rating": "11.15" },
{ "id": 5, "name": "Four Days in September (O Que É Isso, Companheiro?)", "genre": "Drama", "rating": "20.35" },
{ "id": 6, "name": "Sibling Rivalry", "genre": "Comedy", "rating": "5.91" },
{ "id": 7, "name": "Alice in Wonderland", "genre": "Adventure|Children|Fantasy", "rating": "52.69" },
{ "id": 8, "name": "Dead Weekend", "genre": "Comedy|Sci-Fi", "rating": "30.84" },
{ "id": 9, "name": "Top Hat", "genre": "Comedy|Musical|Romance", "rating": "60.06" },
{ "id": 10, "name": "Cleopatra", "genre": "Drama|Romance|War", "rating": "65.39" },
{ "id": 11, "name": "For All Mankind", "genre": "Documentary", "rating": "73.24" },
{ "id": 12, "name": "Messiah of Evil", "genre": "Horror", "rating": "28.9" },
{ "id": 13, "name": "Princess and the Pirate, The", "genre": "Adventure|Comedy|Romance", "rating": "20.41" },
{ "id": 14, "name": "Restrepo", "genre": "Documentary|War", "rating": "71.18" },
{ "id": 15, "name": "Return to the Blue Lagoon", "genre": "Adventure|Romance", "rating": "67.92" },
{ "id": 16, "name": "Convoy", "genre": "Action|Comedy|Drama", "rating": "22.53" },
{ "id": 17, "name": "Perfect", "genre": "Drama|Romance", "rating": "86.25" },
{ "id": 18, "name": "Son of Babylon (Syn Babilonu)", "genre": "Drama", "rating": "26.54" },
{ "id": 19, "name": "Heaven and Earth (Ten to Chi to)", "genre": "Action|Adventure|Drama|War", "rating": "69.39" },
{ "id": 20, "name": "Carcasses", "genre": "Documentary", "rating": "3.72" },
{ "id": 21, "name": "Repentance", "genre": "Drama|Horror|Thriller", "rating": "55.21" },
{ "id": 22, "name": "Loose Change: Second Edition", "genre": "Documentary|Mystery", "rating": "72.22" },
{ "id": 23, "name": "Resurrection Man", "genre": "Drama|Thriller", "rating": "74.68" },
{ "id": 24, "name": "Green Card", "genre": "Comedy|Drama|Romance", "rating": "35.28" },
{ "id": 25, "name": "Micki Maude", "genre": "Comedy", "rating": "2.02" },
{ "id": 26, "name": "Rover, The", "genre": "Crime|Drama", "rating": "18.73" },
{ "id": 27, "name": "Dark Horse (Voksne mennesker)", "genre": "Comedy|Drama|Romance", "rating": "28.19" },
{ "id": 28, "name": "Street Thief", "genre": "Crime|Documentary", "rating": "67.11" },
{ "id": 29, "name": "Woman In Berlin, A (Anonyma - Eine Frau in Berlin)", "genre": "Drama|War", "rating": "13.85" },
{ "id": 30, "name": "Expendables, The", "genre": "Action|Adventure|Thriller", "rating": "92.78" },
{ "id": 31, "name": "American Haunting, An", "genre": "Drama|Horror|Mystery|Thriller", "rating": "54.56" },
{ "id": 32, "name": "Charlotte Gray", "genre": "Drama|Romance", "rating": "2.79" },
{ "id": 33, "name": "Just Bea (Bare Bea)", "genre": "Drama", "rating": "65.83" },
{ "id": 34, "name": "Land Before Time, The", "genre": "Adventure|Animation|Children|Fantasy", "rating": "36.84" },
{ "id": 35, "name": "Mists of Avalon, The", "genre": "Drama|Fantasy", "rating": "25.29" },
{ "id": 36, "name": "Slaughter of the Innocents", "genre": "Crime|Horror|Mystery|Thriller", "rating": "51.11" },
{ "id": 37, "name": "Good Fairy, The", "genre": "Comedy|Romance", "rating": "7.09" },
{ "id": 38, "name": "G.O.R.A.", "genre": "Adventure|Comedy|Sci-Fi", "rating": "54.07" },
{ "id": 39, "name": "Anthony Zimmer", "genre": "Crime|Drama|Romance|Thriller", "rating": "86.28" },
{ "id": 40, "name": "Men in Black (a.k.a. MIB)", "genre": "Action|Comedy|Sci-Fi", "rating": "34.52" },
{ "id": 41, "name": "Slingshot, The (Kådisbellan)", "genre": "Comedy|Drama", "rating": "6.89" },
{ "id": 42, "name": "Look Who's Talking Now", "genre": "Children|Comedy|Romance", "rating": "59.6" },
{ "id": 43, "name": "Rollerball", "genre": "Action|Drama|Sci-Fi", "rating": "36.71" },
{ "id": 44, "name": "The Adventures of Tom Thumb & Thumbelina", "genre": "Animation", "rating": "28.43" },
{ "id": 45, "name": "Gamera the Brave", "genre": "Action|Sci-Fi", "rating": "80.42" },
{ "id": 46, "name": "Liar Liar", "genre": "Comedy", "rating": "44.39" },
{ "id": 47, "name": "Opening Night", "genre": "Drama", "rating": "92.87" },
{ "id": 48, "name": "That's Life", "genre": "Comedy", "rating": "13.72" },
{ "id": 49, "name": "Gendarme Gets Married, The (Le gendarme se marie)", "genre": "Comedy", "rating": "23.41" },
{ "id": 50, "name": "Sealed Cargo", "genre": "Thriller|War", "rating": "13.07" },
{ "id": 51, "name": "Canyon, The", "genre": "Thriller", "rating": "18.15" },
{ "id": 52, "name": "Goal! III", "genre": "Drama|Romance", "rating": "5.56" },
{ "id": 53, "name": "Last Chance: Diary of Comedians, The (Bokutachi no koukan nikki)", "genre": "Comedy|Drama", "rating": "99.05" },
{ "id": 54, "name": "Island in the Sun", "genre": "Drama|Romance", "rating": "38.75" },
{ "id": 55, "name": "Dirty Story", "genre": "Drama", "rating": "57.85" },
{ "id": 56, "name": "These Amazing Shadows", "genre": "Documentary", "rating": "62.32" },
{ "id": 57, "name": "Falling (a.k.a. Fallen)", "genre": "Drama", "rating": "73.01" },
{ "id": 58, "name": "Grandpa for Christmas, A (Bert & Becca)", "genre": "Comedy|Drama", "rating": "66.3" },
{ "id": 59, "name": "Prince Valiant", "genre": "Adventure", "rating": "30.91" },
{ "id": 60, "name": "Desperate Journey", "genre": "Drama|War", "rating": "80.63" },
{ "id": 61, "name": "Petulia", "genre": "Drama", "rating": "44.79" },
{ "id": 62, "name": "Presidio, The", "genre": "Action|Crime|Romance|Thriller", "rating": "15.39" },
{ "id": 63, "name": "Hidden, The", "genre": "Action|Horror|Sci-Fi", "rating": "34.3" },
{ "id": 64, "name": "Three (a.k.a. 3)", "genre": "Comedy|Drama|Romance", "rating": "5.44" },
{ "id": 65, "name": "Roots", "genre": "Drama|War", "rating": "77.54" },
{ "id": 66, "name": "Dragon Eyes", "genre": "Action|Crime|Drama", "rating": "78.55" },
{ "id": 67, "name": "Beautiful Darling", "genre": "Documentary", "rating": "37.4" },
{ "id": 68, "name": "Car Wash", "genre": "Comedy", "rating": "34.36" },
{ "id": 69, "name": "Paradise", "genre": "Adventure|Romance", "rating": "44.39" },
{ "id": 70, "name": "Patent Leather Kid, The", "genre": "Drama", "rating": "73.04" },
{ "id": 71, "name": "Villain, The", "genre": "Comedy|Western", "rating": "99.67" },
{ "id": 72, "name": "Filth", "genre": "Comedy|Crime|Drama", "rating": "8.98" },
{ "id": 73, "name": "Last Frontier, The", "genre": "Western", "rating": "26.45" },
{ "id": 74, "name": "Permanent Record", "genre": "Drama", "rating": "34.68" },
{ "id": 75, "name": "Edge, The", "genre": "Adventure|Drama", "rating": "94.15" },
{ "id": 76, "name": "Curse of the Werewolf, The", "genre": "Drama|Horror|Romance", "rating": "80.23" },
{ "id": 77, "name": "Lonelyhearts", "genre": "Drama|Film-Noir", "rating": "4.95" },
{ "id": 78, "name": "Hate (Haine, La)", "genre": "Crime|Drama", "rating": "11.21" },
{ "id": 79, "name": "Dr. Dolittle: Tail to the Chief", "genre": "Children|Comedy|Fantasy", "rating": "45.07" },
{ "id": 80, "name": "Mary Stevens M.D.", "genre": "Drama", "rating": "38.05" },
{ "id": 81, "name": "Verboten!", "genre": "Action|Romance|War", "rating": "70.5" },
{ "id": 82, "name": "Vassilisa the Beautiful (Vasilisa prekrasnaya)", "genre": "Adventure|Fantasy", "rating": "12.72" },
{ "id": 83, "name": "Harry and the Hendersons", "genre": "Children|Comedy", "rating": "6.85" },
{ "id": 84, "name": "George & A.J.", "genre": "Animation|Children|Comedy", "rating": "60.71" },
{ "id": 85, "name": "Murder Most Foul", "genre": "Comedy|Crime|Drama|Mystery|Thriller", "rating": "75.37" },
{ "id": 86, "name": "Tyler Perry's The Family That Preys", "genre": "Drama", "rating": "5.56" },
{ "id": 87, "name": "Gate of Flesh (Nikutai no mon)", "genre": "Drama", "rating": "26.89" },
{ "id": 88, "name": "Goat, The", "genre": "Comedy", "rating": "33.05" },
{ "id": 89, "name": "Weddings and Babies ", "genre": "Drama|Romance", "rating": "94.08" },
{ "id": 90, "name": "Too Many Girls", "genre": "Comedy|Musical", "rating": "29.05" },
{ "id": 91, "name": "I Killed My Mother (J'ai tué ma mère)", "genre": "Drama", "rating": "10.73" },
{ "id": 92, "name": "Walk in the Clouds, A", "genre": "Drama|Romance", "rating": "6.67" },
{ "id": 93, "name": "Suspiria", "genre": "Horror", "rating": "84.71" },
{ "id": 94, "name": "Alice's Adventures in Wonderland", "genre": "Adventure|Children|Fantasy|Musical", "rating": "8.63" },
{ "id": 95, "name": "Kenny Begins", "genre": "Action|Comedy|Sci-Fi", "rating": "61.57" },
{ "id": 96, "name": "Restoration", "genre": "Drama", "rating": "59.16" },
{ "id": 97, "name": "Love on the Run (Amour en fuite, L')", "genre": "Comedy|Drama|Romance", "rating": "85.47" },
{ "id": 98, "name": "Night of the Living Dead", "genre": "Horror|Sci-Fi|Thriller", "rating": "99.42" },
{ "id": 99, "name": "Poltergeist II: The Other Side", "genre": "Horror|Thriller", "rating": "57.24" },
{ "id": 100, "name": "Maidentrip", "genre": "Documentary", "rating": "81.03" }
];
//Default Sort
function defaultTableSorting(a, b) {
a = a.toLowerCase();
b = b.toLowerCase();
return (a < b) ? -1 : (a > b) ? 1 : 0;
}
movieData.sort(function(a, b) {
return defaultTableSorting(b.name, a.name);
})
//Toggle Sort
function sortTable(n) {
let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("tableData");
switching = true;
dir = 'asc';
while (switching) {
switching = false;
rows = table.rows;
for (i = 0; i < (movieData.length - 1); i ) {
shouldSwitch = false;
x = rows[i].getElementsByTagName('td')[n];
y = rows[i 1].getElementsByTagName('td')[n];
if (dir == 'asc') {
if (y.innerHTML.toString() > x.innerHTML.toString()) {
shouldSwitch = true;
break;
}
} else if (dir == 'desc') {
if (y.innerHTML.toString() < x.innerHTML.toString()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i 1], rows[i]);
switching = true;
switchcount ;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
//Add row content
function addTableRow() {
let table = document.getElementById('tableData');
let txt = '';
let movieNameInput = document.getElementById('movieName').value;
let movieGenreInput = document.getElementById('movieGenre').value;
let movieRatingInput = document.getElementById('movieRating').value;
let row = table.insertRow();
txt = txt
`<tr><td>${movieNameInput}</td>
<td>${movieGenreInput}</td>
<td>${movieRatingInput}</td></tr>`;
row.innerHTML = txt;
}
// Delete row content
function deleteRow(i) {
movieData.splice(i, 1);
loadTableData(movieData);
};
// Pagination
function loadTableData(movieData, pageSize, pagenumber) {
let movieDataP = movieData.slice((pagenumber - 1) * pageSize, pagenumber * pageSize);
const tableBody = document.getElementById('tableData');
let txt = '';
for (let i = 0; i < movieDataP.length; i ) {
txt = txt `<tr><td>${movieDataP[i].name}</td>
<td>${movieDataP[i].genre}</td><td>${movieDataP[i].rating}</td>
<td><button onclick="deleteRow(${i});">Delete</button>
<button onclick="editRow(${i});">Edit</button></td></tr>`;
}
tableBody.innerHTML = txt;
}
function decreaseTableData(){
let value = parseInt(document.getElementById('pagenumber').value, 10);
value = isNaN(value) ? 0 : value;
value--;
if (value < 1) {
value = 1
}
document.getElementById('pagenumber').value = value;
loadTableData(movieData, 20, value);
}
function increaseTableData(){
let value = parseInt(document.getElementById('pagenumber').value, 10);
value = isNaN(value) ? 0 : value;
value ;
if (value > 5) {
value = 5
}
document.getElementById('pagenumber').value = value;
loadTableData(movieData, 20, value);
}
window.onload = () => {
loadTableData(movieData, 20, 1);
}
xpbody {
color: black;
font-weight: 500;
background-image: url('');
background-size: cover;
background-repeat: repeat;
background-attachment: fixed;
}
table {
border-collapse: collapse;
width: 70%;
text-align: center;
margin: 40px auto;
}
tr,
th {
border: 1px solid #cccccc;
padding: 8px;
font-size: 16px Z;
}
th {
font-weight: bold;
text-transform: uppercase;
color: bisque;
background-color: #444
}
tr:nth-child(even) {
background: rgba(15, 85, 6, 0.438);
}
.name {
background: maroon;
}
.genre {
background-color: rgba(245, 62, 6, 0.658);
}
.action {
background-color: white;
}
.toggler {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
background-color: rgba(240, 101, 50, 0.411)
}
.toggler:hover {
color: whitesmoke;
background-color: rgba(82, 79, 78, 0.568);
transition: ease-in-out .5s;
}
.addremove {
display: flex;
justify-content: center;
align-items: center;
padding-top: 10px;
padding-bottom: 15px;
color: coral;
font-weight: 900;
}
.pageButton {
border: 1px solid black;
padding: 5px;
}
.clickPageNumber {
background-color: lightgrey;
padding: 5px;
margin-left: 2px;
margin-right: 2px;
}
.pagination-block {
text-align: center;
width: 100%;
}
.pagination-block span {
display: inline-block;
}
.pagination-block .pageButton {
background-color: grey;
color: white;
}
.pagination-block span:hover {
cursor: pointer;
}
.opacity {
opacity: 0.5;
}
.outline-none {
outline: none;
user-select: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tabela</title>
</head>
<!--TABLE-->
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="toggler" onclick="sortTable(0)">Name</th>
<th class="genre">Genre</th>
<th class="toggler" onclick="sortTable(2)">Rating</th>
<th class="action">Action</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
</div>
<br>
<!--ADD/REMOVE BUTTON-->
<div class="addremove">
Name : <input type="text" name="text" id="movieName">
Genre : <input type="text" name="text" id="movieGenre">
Rating : <input type="text" name="rating" id="movieRating">
<button onclick="addTableRow();">Add</button>
</div>
<div class="pagination">
<div class="pagination-block">
<span class="pageButton outline-none" onclick="decreaseTableData()" id="button_prev">Prev</span>
<input type="button" value="1" id="pagenumber"/>
<span class="pageButton outline-none" onclick="increaseTableData()" id="button_next">Next</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>CodePudding user response：
For the issue with the delete button:
From the eventHandler of the delete button you are calling loadTableData(movieData) without a pageSize or pageNumber parameter. Thus
let movieDataP = movieData.slice((pagenumber - 1) * pageSize, pagenumber * pageSize);
won't return any elements to display at the page ...
And for your issue with sorting:
Somewhere while you are sorting, an rows[i] or rows[i 1] goes out of bounds or points at an undefined element. Any particular reason, you are not just using the built-in Array.sort and then recreate the table?
function sortTable(n) {
//data is sorted ascending if for every element
//the element is less then or equal to the next element
let isascending = movieData.every((x, i) => {
let next =movieData[i 1];
if (next === undefined) return true;
switch (n){
case 0:
return x.name.localeCompare(next.name) <= 0;
case 2:
return x.rating <= next.rating;
}
});
movieData.sort((a,b) => {
switch (n) {
case 0:
//if data is currently sorted ascending reverse sortorder
return a.name.localeCompare(b.name) * (isascending ? -1 : 1);
case 2:
return ( a.rating - b.rating) * (isascending ? -1 : 1);
default:
return 0;
}
})
//recreate the table from the sorted array
let value = parseInt(document.getElementById('pagenumber').value, 10);
loadTableData(movieData, 20, value);
}