How to show correct number of pagination buttons based on filtered search results

Question

I'm having trouble figuring out how to make my pagination buttons go away as I search. The search field yields results in real time, so as the search is filtering I want the pagination buttons to correspond to how many results are being displayed. I have it programmed to display 10 results per page, so for example if my search yields 10 or less results, all of the pagination buttons should be removed. If it yields 11-20 results, two buttons show, ect. Here is my code:

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Students</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/design.css">
    <link rel="stylesheet" href="css/myStyles.css">
  </head>
  <body>
    <div class="page">
      <div class="page-header cf">
        <h2>Students</h2>
      </div>
      <ul class="student-list">
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
                <h3>iboya vat</h3>
                <span class="email">iboya.vat@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/15/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
                <h3>aapo niskanen</h3>
                <span class="email">aapo.niskanen@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/15/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                <h3>phillip cox</h3>
                <span class="email">phillip.cox@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/11/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg">
                <h3>zilda moreira</h3>
                <span class="email">zilda.moreira@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/15/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg">
                <h3>lilou le gall</h3>
                <span class="email">lilou.le gall@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/16/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg">
                <h3>lucy hall</h3>
                <span class="email">lucy.hall@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/11/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
                <h3>mark colin</h3>
                <span class="email">mark.colin@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/14/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg">
                <h3>sara alves</h3>
                <span class="email">sara.alves@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/19/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                <h3>ramon macrae</h3>
                <span class="email">ramon.macrae@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/13/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg">
                <h3>connor taylor</h3>
                <span class="email">connor.taylor@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/18/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg">
                <h3>aymeric morel</h3>
                <span class="email">aymeric.morel@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                <h3>lorenz otto</h3>
                <span class="email">lorenz.otto@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/11/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
                <h3>karl williamson</h3>
                <span class="email">karl.williamson@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/12/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                <h3>ouassim heering</h3>
                <span class="email">ouassim.heering@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/18/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                <h3>roberto molina</h3>
                <span class="email">roberto.molina@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg">
                <h3>jordan hubert</h3>
                <span class="email">jordan.hubert@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
                <h3>melvin baker</h3>
                <span class="email">melvin.baker@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/18/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg">
                <h3>everett gordon</h3>
                <span class="email">everett.gordon@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/17/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg">
                <h3>aiden ma</h3>
                <span class="email">aiden.ma@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/18/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg">
                <h3>florent gerard</h3>
                <span class="email">florent.gerard@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 02/12/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg">
                <h3>amber chen</h3>
                <span class="email">amber.chen@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/12/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg">
                <h3>alexandra davies</h3>
                <span class="email">alexandra.davies@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/11/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg">
                <h3>sergio cole</h3>
                <span class="email">sergio.cole@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 02/17/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg">
                <h3>edgar dixon</h3>
                <span class="email">edgar.dixon@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/17/11</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg">
                <h3>kirk myers</h3>
                <span class="email">kirk.myers@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/17/15</span>
           </div>
        </li>
      </ul>
    </div>

    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/pagination.js"></script>
  </body>
</html>

jQuery

$(document).ready(function() {
    var $studentListItem = $('.student-item');
    var $listContainer = $('.student-list');
    //number of items we want to show on each page
    var $itemsPerPage = 10;

    view.hideItems($studentListItem, $itemsPerPage);
    view.appendItemsToPage($listContainer, $studentListItem, $itemsPerPage);
    view.addPaginationButtons($studentListItem, $itemsPerPage);
    view.addSearchBar($studentListItem);
});


var view = {
    hideItems: function($studentListItem, $itemsPerPage) {
        //hide all items except first 10
        $studentListItem.filter(':gt('+($itemsPerPage -1) +')').hide();
    },

    appendItemsToPage: function($listContainer, $studentListItem, $itemsPerPage) {

        var $paginationDiv = '<div class="pagination"></div>';
        var $ul = '<ul></ul>';
        //append pagination div to .page and new ul to $paginationDiv
        $($paginationDiv).appendTo('.page').append($ul);


        //calculate number of pages needed
        var $numberOfPages = Math.ceil($studentListItem.length / $itemsPerPage);

        //append li's to $listContainer
        for (var i = 0; i < $numberOfPages; i++) {
            $('.pagination').find('ul').append('<li class="paginationBtns">'+ '<a href="#">'+ (i + 1) + '</a>' + '</li>');
        }


    },

    addPaginationButtons: function($studentListItem, $itemsPerPage) {
        //add click listener to each li
        $('.pagination').find('ul li a').on('click', function(e) {
            //prevent default behavior of going back to top of page on click
            e.preventDefault();
            //grab which link user clicks
            var $linkNumber = $(this).text();


            //select items that correspond to li that is 1 less than button clicked
            var $itemsToHide = $studentListItem.filter(':lt('+(($linkNumber-1) * $itemsPerPage) +')');

            //merge items that are less than and greater than button clicked to $itemsToHide
            $.merge($itemsToHide, $studentListItem.filter(':gt('+(($linkNumber * $itemsPerPage) -1) +')'));
            //hide items
            $itemsToHide.hide();

            //select items that should show
            var $itemsToShow = $($studentListItem).not($itemsToHide);
            //show items
            $itemsToShow.show();

            //toggle active class NOT WORKING
            $('li a').addClass('active');
            $('li a').removeClass('active');

        });
    },

    addSearchBar: function($studentListItem) {
    $('.page-header').append(
        '<div class="student-search">' +
        '<input id="searchBar" placeholder="Search for students...">' +
        '<button>Search</button'
        );

        var $studentName = $('.student-item div h3');   
        var $searchBar = $('#searchBar');
        var $studentEmail = $('.email');

        //filter search results in real time
        $($searchBar).keyup(function() {
            $($studentListItem).each(function() {
                if($(this).text().indexOf($searchBar.val().toLowerCase()) > -1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }

            });
        });
    }   
}

Answer 1 · 2016-09-12T11:12:22Z

September 12, 2016 11:12am

Solved.

Welcome to the Treehouse Community

Looking to learn something new?

Austin Harms

Austin Harms

How to show correct number of pagination buttons based on filtered search results

1 Answer

Austin Harms

Austin Harms