Javascript Js分页页面链接不起作用

我正试图实现一个简单的分页项目，但我遇到了一个搜索栏问题

以下是我迄今为止所取得的成就：

每页显示10个条目 我的脚本可以根据EntriessStudent的总数计算页面链接的总数 我可以访问每一页，看到它的条目，比如说，第1页：从0到9的学生。。。第三页：30到39岁的学生等 搜索功能 我故意关闭了按按钮搜索。它仅在“keyup”事件侦听器中可用。 到目前为止我未能实施的内容：

键入搜索查询“/15”时，将显示两页，其中包含相应的条目。 但如果我点击第2页的链接，它会显示每页超过10条默认参数，返回到第1页，同样的错误也会发生。 我怀疑页面链接从其他地方得到了错误的值。 我试着调试，似乎他们从$StudentList整个学生列表中获得了值，但不是从我传递到那里的搜索结果中获得的值

我总共有3个函数

function showPage(studentList, pageNum = 1){
  const showPerPage = 10;    
  $(studentList).hide(); 
  const calcStart = (pageNum) => pageNum === 1 ? 0 : (pageNum - 1) * showPerPage;
  const start = calcStart(pageNum);
  const end = pageNum * showPerPage;
  $(studentList).slice(start,end).each(function(i, li){
    $(li).fadeIn(50);
});
}

  function appendPageLinks(studentList){
    totalPageNum = Math.ceil(studentList.length / 10);
    const pagination = 'pagination';
    if($('.pagination').length === 0){
        $('.page').append(`
        <div class="${pagination}">
            <ul></ul>
        </div>
    `);
    } 
    $('.pagination ul').children().remove();
    if (totalPageNum > 1){
        for(let i=0; i<totalPageNum; i++){
            const pageLink = `
                <li>
                    <a href="#">${i + 1}</a>
                </li>
            `;
            $('.pagination ul').append(pageLink);
        }
    }
    $('.pagination ul li').children().first().addClass('active'); 
        $('.pagination ul').on('click', 'a', function(e){
            e.preventDefault();
            const pgNum = parseInt($(e.target).text());
            showPage(studentList, pgNum);
            $(this).parent().siblings().children().removeClass('active');
            $(this).addClass('active');
        });
    } 


function searchStudent(element, filter){
$(element).each(function(){         
    if($(this).text().toUpperCase().includes(filter)){
        $(this).show();
    } else {
        $(this).hide();
    }        
});
let num = $('.student-item:not([style*="display: none"])').length;
let searchRes = $('.student-item:not([style*="display: none"])');
num > 0 ? $('.notFound').hide() : $('.notFound').show();
return searchRes;
}

})

和上面这个一样

 $('.pagination ul').on('click', 'a', function(e)

下面是codepen的源代码：

如果有人可以建议如何修复页面链接以正确更新

 $('.pagination ul').on('click', 'a', function(e){
        e.preventDefault();
        const pgNum = parseInt($(e.target).text());
        showPage(studentList, pgNum);
        $(this).parent().siblings().children().removeClass('active');
        $(this).addClass('active');
    });

上述函数showPageStudentList，pgNum；存在问题；。单击分页链接时，整个学生数组将作为studentList传递。相反，您可能希望只发送搜索查询为您提供新studentArray后得到的结果

下面是我对js做了一些修改，可能会得到你想要的结果

// Setting up variables
const $studentList = $('.student-list').children();
var $changedStudentList = $studentList;
$('.student-list').prepend('<div class="notFound"></div>');
$('.notFound').html(`<span>No results</span>`);
$('.notFound').hide();

// Bulding a list of ten students and displaying them on the page
function showPage(studentList, pageNum = 1){
    const showPerPage = 10;    
    // hide all students on the page
    $(studentList).hide(); 

    // Get start/end for each student based on the page number
    const calcStart = (pageNum) => pageNum === 1 ? 0 : (pageNum - 1) * showPerPage;
    const start = calcStart(pageNum);
    const end = pageNum * showPerPage;

// Looping through all students in studentList
$(studentList).slice(start,end).each(function(i, li){
    // if student should be on this page number
    // show the student
    $(li).fadeIn(50);
});
}

// Search component
const searchBar = `
<div class="student-search">
    <input placeholder="Search for students...">
    <button>Search</button>
</div>
`;
$('.page-header').append(searchBar);

$('.student-search input').on('keyup', function(){
const searchQuery = $(this).val();
const searchResults = searchStudent($('.student-list li'), searchQuery.toUpperCase());
$changedStudentList = searchResults;
showPage(searchResults);
appendPageLinks(searchResults);
});


// Student search
function searchStudent(element, filter){

$(element).each(function(){         
    if($(this).text().toUpperCase().includes(filter)){
        $(this).show();
    } else {
        $(this).hide();
    }        
});
let num = $('.student-item:not([style*="display: none"])').length;
let searchRes = $('.student-item:not([style*="display: none"])');
num > 0 ? $('.notFound').hide() : $('.notFound').show();
return searchRes;
};



// Creating all page links based on a list of students
function appendPageLinks(studentList){
// determine how many pages for this student list
totalPageNum = Math.ceil(studentList.length / 10);
// create a page link section
const pagination = 'pagination';
// add a page link to the page link section
// if class the element already exists
if($('.pagination').length === 0){
    $('.page').append(`
    <div class="${pagination}">
        <ul></ul>
    </div>
`);
} 

// remove the old page link section from the site
$('.pagination ul').children().remove();

if (totalPageNum > 1){
    // 'for' every page
    for(let i=0; i<totalPageNum; i++){
        const pageLink = `
            <li>
                <a href="#">${i + 1}</a>
            </li>
        `;
        // append our new page link section to the site
        $('.pagination ul').append(pageLink);
    }
}

$('.pagination ul li').children().first().addClass('active'); 

    // define what happens when you click a link (event listener)
    $('.pagination ul').on('click', 'a', function(e){
        e.preventDefault();
        const pgNum = parseInt($(e.target).text());
        // Use showPage() to display the page for the link clicked
        showPage($changedStudentList, pgNum);
        // mark that link as 'active'
        $(this).parent().siblings().children().removeClass('active');
        $(this).addClass('active');
    });
} 

showPage($studentList);
appendPageLinks($studentList);

---

谢谢，现在一切正常。我一直在绞尽脑汁想如何获得这样的价值，并考虑重组所有资产。很高兴它起到了作用！！干杯

// Setting up variables
const $studentList = $('.student-list').children();
var $changedStudentList = $studentList;
$('.student-list').prepend('<div class="notFound"></div>');
$('.notFound').html(`<span>No results</span>`);
$('.notFound').hide();

// Bulding a list of ten students and displaying them on the page
function showPage(studentList, pageNum = 1){
    const showPerPage = 10;    
    // hide all students on the page
    $(studentList).hide(); 

    // Get start/end for each student based on the page number
    const calcStart = (pageNum) => pageNum === 1 ? 0 : (pageNum - 1) * showPerPage;
    const start = calcStart(pageNum);
    const end = pageNum * showPerPage;

// Looping through all students in studentList
$(studentList).slice(start,end).each(function(i, li){
    // if student should be on this page number
    // show the student
    $(li).fadeIn(50);
});
}

// Search component
const searchBar = `
<div class="student-search">
    <input placeholder="Search for students...">
    <button>Search</button>
</div>
`;
$('.page-header').append(searchBar);

$('.student-search input').on('keyup', function(){
const searchQuery = $(this).val();
const searchResults = searchStudent($('.student-list li'), searchQuery.toUpperCase());
$changedStudentList = searchResults;
showPage(searchResults);
appendPageLinks(searchResults);
});


// Student search
function searchStudent(element, filter){

$(element).each(function(){         
    if($(this).text().toUpperCase().includes(filter)){
        $(this).show();
    } else {
        $(this).hide();
    }        
});
let num = $('.student-item:not([style*="display: none"])').length;
let searchRes = $('.student-item:not([style*="display: none"])');
num > 0 ? $('.notFound').hide() : $('.notFound').show();
return searchRes;
};



// Creating all page links based on a list of students
function appendPageLinks(studentList){
// determine how many pages for this student list
totalPageNum = Math.ceil(studentList.length / 10);
// create a page link section
const pagination = 'pagination';
// add a page link to the page link section
// if class the element already exists
if($('.pagination').length === 0){
    $('.page').append(`
    <div class="${pagination}">
        <ul></ul>
    </div>
`);
} 

// remove the old page link section from the site
$('.pagination ul').children().remove();

if (totalPageNum > 1){
    // 'for' every page
    for(let i=0; i<totalPageNum; i++){
        const pageLink = `
            <li>
                <a href="#">${i + 1}</a>
            </li>
        `;
        // append our new page link section to the site
        $('.pagination ul').append(pageLink);
    }
}

$('.pagination ul li').children().first().addClass('active'); 

    // define what happens when you click a link (event listener)
    $('.pagination ul').on('click', 'a', function(e){
        e.preventDefault();
        const pgNum = parseInt($(e.target).text());
        // Use showPage() to display the page for the link clicked
        showPage($changedStudentList, pgNum);
        // mark that link as 'active'
        $(this).parent().siblings().children().removeClass('active');
        $(this).addClass('active');
    });
} 

showPage($studentList);
appendPageLinks($studentList);