Javascript 我已经在html中创建了自定义分页，我的“上一页”和“下一页”按钮不起作用
frontarrow的js代码已编写，但只显示第二个记录页Javascript 我已经在html中创建了自定义分页，我的“上一页”和“下一页”按钮不起作用,javascript,html,pagination,Javascript,Html,Pagination,frontarrow的js代码已编写，但只显示第二个记录页 <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<!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>
记录
>>
...
只需将单击事件箭头设置一次。由于它位于函数内部，因此每次调用函数时都会使用不同的值对其进行设置。这是剧本的修订版
<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>
//JavaScript源代码
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 paginationu element=document.getElementById（'pagination'）；
让当前页面=1；
设行数=2；
让max_page=Math.ceil（list_items.length/行）；
ArrowFront.addEventListener（'click'，函数（）{
如果（当前页面<最大页面）{
当前页面++；
显示列表（列表项、列表元素、行、当前页面）；
}
});
ArrowBack.addEventListener（'click'，函数（）{
如果（当前页面>1）{
当前_页--；
显示列表（列表项、列表元素、行、当前页面）；
}
});
函数显示列表（项目、包装、每页行、每页）{
控制台日志（第页）；
wrapper.innerHTML=“”；
第页--；
开始=每页行数*页数；
让结束=开始+每页行数；
让paginatedItems=items.slice（开始、结束）；
console.log（开始、结束）
console.log（'paginatedItems'，paginatedItems）
for（设i=0；i0；i--）{
设btn=分页按钮（i，项目）；
appendChild（btn）；
}
}
功能分页按钮（页面，项目）{
let button=document.createElement（'button'）；
button.innerText=页面；
如果（当前页面==第页）{
button.classList.add（'active'）；
}
按钮。addEventListener（'click'，函数（）{
当前页面=第页；
显示列表（项目、列表元素、行、当前页面）；
让current_btn=document.querySelector（'.pagination button.active'）；
当前_btn.classList.remove（'active'）；
button.classList.add（'active'）；
});
返回按钮；
}
显示列表（列表项、列表元素、行、当前页面）；
设置分页（列表项、分页元素、行）；