javascript - js分页页面链接失效

Question

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

这是我迄今为止所完成的工作:

• 每页显示 10 个条目
• 我的脚本可以根据条目总数(学生)计算页面链接总数
• 我可以访问每个页面并查看其条目(例如，第 1 页:0 到 9 岁的学生...第 3 页:30 到 39 岁的学生，等等)
• 搜索功能
• 我故意关闭了按按钮搜索。它仅适用于“keyup”事件监听器。

到目前为止我未能实现的内容:

当输入搜索查询:“/15”时，会显示 2 个页面，其中包含相应的条目。但是，如果我单击第 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;
}

我认为这些事件监听器没有获得正确的值:

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

});

还有上面这个

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

这是codepen上的源代码: https://codepen.io/hopper86/pen/WJmMMG?editors=1010

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

Answer 1

 $('.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');
    });

问题出在上面的函数(showPage(studentList, pgNum);)。当您单击分页链接时，整个学生数组将作为学生列表传递。相反，您可能只想发送搜索查询为您提供新的 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);