frontarrow的js代码已编写，但它只显示第二个记录页
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>
Records
</title>
<link rel="stylesheet" href="StyleSheet2.css" />
</head>
<body>
<main>
<div class="list" id="list"></div>
<container class="container " id="containerPager">
<button class="button" id="buttonFrontArrow">>></button>
<button class="button" id="buttonThreeDots">...</button>
<div class="pagenumbers" id="pagination">
</div>
<button class="button" id="buttonBackArrow"><<</button>
<button id="ShowingRecords"></button>
</container>
</main>
<script >// JavaScript source code
const ArrowBack = document.getElementById('buttonBackArrow');
const ArrowFront = document.getElementById('buttonFrontArrow');
const list_items = ["item1", "item2", "item3", "item1", "item2", "item3", "item2", "item3", "item1", "item2", "item3","item10"];
const list_element = document.getElementById('list');
const pagination_element = document.getElementById('pagination');
let current_page = 1;
let rows = 2;
function DisplayList(items, wrapper, rows_per_page, page) {
wrapper.innerHTML = "";
page--;
let start = rows_per_page * page;
let end = start + rows_per_page;
let paginatedItems = items.slice(start, end);
for (let i = 0; i < paginatedItems.length; i++) {
let item = paginatedItems[i];
let item_element = document.createElement('div');
item_element.classList.add('item');
item_element.innerText = item;
wrapper.appendChild(item_element);
}
const ShowingRecords = document.getElementById('ShowingRecords');
ShowingRecords.innerHTML = "Showing Records " + (start+1) + " to " + end + " of " + (items.length );
}
function SetupPagination(items, wrapper, rows_per_page) {
wrapper.innerHTML = "";
let page_count = Math.ceil(items.length / rows_per_page) + 1;
for (let i = page_count-1; i >0; i--) {
let btn = PaginationButton(i,items);
wrapper.appendChild(btn);
}
}
function PaginationButton(page,items) {
let button = document.createElement('button');
button.innerText = page;
if (current_page == page) {
button.classList.add('active');
}
button.addEventListener('click', function () {
current_page = page;
DisplayList(items, list_element, rows, current_page);
let current_btn = document.querySelector('.pagination button.active');
current_btn.classList.remove('active');
button.classList.add('active');
});
ArrowFront.addEventListener('click', function () {
current_page = page;
let current_pageArr = current_page + 1;
DisplayList(items, list_element, rows, current_pageArr);
let current_btn = document.querySelector('.pagination button.active');
current_btn.classList.remove('active');
button.classList.add('active');
current_pageArr = current_pageArr + 1;
});
return button;
}
DisplayList(list_items, list_element, rows, current_page);
SetupPagination(list_items, pagination_element, rows);
</script>
</body>
</html>
我需要上一个和下一个按钮来更改页面上的记录，但不需要更改网页本身。我已经创建了自定义的分页，我的页码链接正在工作，但不是我的上一个和下一个箭头链接。我想要js代码，它可以帮助我更改页面上的记录。
您只需要设置一次单击事件ArrowFront。由于它位于函数内部，因此每次调用函数时都会设置不同的值。这是脚本的修订版本
<script>// JavaScript source code
const ArrowBack = document.getElementById('buttonBackArrow');
const ArrowFront = document.getElementById('buttonFrontArrow');
const list_items = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10", "item11", "item12"];
const list_element = document.getElementById('list');
const pagination_element = document.getElementById('pagination');
let current_page = 1;
let rows = 2;
let max_page = Math.ceil(list_items.length / rows);
ArrowFront.addEventListener('click', function () {
if(current_page < max_page){
current_page++;
DisplayList(list_items, list_element, rows, current_page);
}
});
ArrowBack.addEventListener('click', function () {
if(current_page > 1){
current_page--;
DisplayList(list_items, list_element, rows, current_page);
}
});
function DisplayList(items, wrapper, rows_per_page, page) {
console.log(page);
wrapper.innerHTML = "";
page--;
let start = rows_per_page * page;
let end = start + rows_per_page;
let paginatedItems = items.slice(start, end);
console.log(start, end)
console.log('paginatedItems', paginatedItems)
for (let i = 0; i < paginatedItems.length; i++) {
let item = paginatedItems[i];
let item_element = document.createElement('div');
item_element.classList.add('item');
item_element.innerText = item;
wrapper.appendChild(item_element);
}
const ShowingRecords = document.getElementById('ShowingRecords');
ShowingRecords.innerHTML = "Showing Records " + (start + 1) + " to " + end + " of " + (items.length);
}
function SetupPagination(items, wrapper, rows_per_page) {
wrapper.innerHTML = "";
let page_count = Math.ceil(items.length / rows_per_page) + 1;
for (let i = page_count - 1; i > 0; i--) {
let btn = PaginationButton(i, items);
wrapper.appendChild(btn);
}
}
function PaginationButton(page, items) {
let button = document.createElement('button');
button.innerText = page;
if (current_page == page) {
button.classList.add('active');
}
button.addEventListener('click', function () {
current_page = page;
DisplayList(items, list_element, rows, current_page);
let current_btn = document.querySelector('.pagination button.active');
current_btn.classList.remove('active');
button.classList.add('active');
});
return button;
}
DisplayList(list_items, list_element, rows, current_page);
SetupPagination(list_items, pagination_element, rows);
</script>