Ссылки на страницы с разбивкой по страницам Js не работают

holler спросил: 28 апреля 2018 в 09:33 в: javascript

Я пытаюсь реализовать простой проект разбивки на страницы, пока я застрял в вопросе поиска.

Вот что я сделал до сих пор:

  • 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

Если кто-то может предложить, как исправить чтобы ссылки на страницы были правильно обновлены.

1 ответ

Есть решение
Kumar Aman ответил: 28 апреля 2018 в 10:00
 $('.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); ). Пока вы нажимаете на ссылки для разбивки на страницы, весь массив учеников передается как 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);
holler ответил: 28 апреля 2018 в 10:15
Спасибо, сейчас работает как ожидается. Разрывал себе голову над тем, как получить эту ценность и все реструктурировать.
Kumar Aman ответил: 28 апреля 2018 в 10:18
Рад, что это помогло! Ура !!