我在 html 中创建了一个自定义分页，我的上一个和下一个按钮不起作用答案

【问题标题】：I have created a custom pagination in html, my prev and next button not working我在 html 中创建了一个自定义分页，我的上一个和下一个按钮不起作用
【发布时间】：2020-09-14 14:51:39
【问题描述】：

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代码。

【问题讨论】：

标签： javascript html pagination

【解决方案1】：

您只需将点击事件 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>

【讨论】：