CODEWITHSUNDEEP
javascript
DragonRaine
DragonRaine

Reputation: 21

Pagination with Vanilla JavaScript

I'm quite new to JavaScript, so apologies if this is obvious or if the question isn't clear.

I have a pagination assignment, and I have to limit a list of students to 10 per page using a function. I'm allowed a little jQuery, but absolutely no plugins.

Currently I have:

const numberOfStudents = $('.page .student-item').length;
const limitPerPage = 10;
var totalPages = Math.ceil(numberOfStudents / limitPerPage);

How do I go about creating a function using this? To limit the students. I was thinking of using a loop, but I've no idea where to start.

Thanks in advance!

Upvotes: 2

Views: 3316

Answers (3)

Joseph Dykstra
Joseph Dykstra

Reputation: 1466

Is the assignment to paginate .student-items whose DOM elements are already loaded onto the page? This isn't standard, but if that's the assignment, then I recommend hiding the .student-items that are not on the "current page".

// All this code should run after the .student-item's are loaded.
// If this makes for an ugly flash of .student-item's that should not
// be shown, then you can hide the .student-item's by default in css,
// and let jquery force the .student-item to be shown.

function displayPage(pageNum) { // pageNum must be between 0 and totalPages-1
    $('.page .student-item').each(function(idx, studentEle) {
        if (idx >= (limitPerPage * pageNum) && idx < (limitPerPage * (pageNum+1))) {
            studentEle.show(); // student is on this page
        } else {
            studentEle.hide(); // student is NOT on this page
        }
    });
}

$('.page-select').on('change', function () {
    // example <select> element for the page.
    // Most likely you would want some links or buttons, not a <select> element, but this is just an example
    var selectedPage = $('.page-select option:selected').first().val();
    displayPage(selectedPage - 1);
});

displayPage(0);

Upvotes: 0

wmcb91
wmcb91

Reputation: 471

It seems like your are using jQuery to manipulate the DOM, and may not actually have have data directly at your disposal. This code not the best solution from a professional standpoint but I think fits what appears to be your educatioal situation. 

var currentPage = 1;

// Hide every student beyond the first page
$('.student-item').each(function(i, student) {
  if (i >= limitPerPage * currentPage) {
    $(student).hide()
  }
});

// Manipulate the DOM to show the students on the new 'page'
function displayNewPage() {
  $('.student-item').each(function(i, student) {
    if (i >= limitPerPage * currentPage || i < limitPerPage * (currentPage - 1)) {
      $(student).hide();
    } else {
      $(student).show();
    }
  });
};

// Create a button with id 'page-left' for this work
$('#page-left').on('click', function() {
  if (currentPage > 1) {
    currentPage--;
    displayNewPage();
  }
  if (currentPage === 1) {
    $('#page-left').prop('disabled', true);
  }
  $('#page-right').prop('disabled', false);
});

// Create a button with id 'page-right' for this work
$('#page-right').on('click', function() {
  if (currentPage < totalPages) {
    currentPage++;
    displayNewPage();
  }
  if (currentPage === totalPages) {
    $(event.target).prop('disabled', true);
  }

  // Allow 
  $('#page-left').prop('disabled', false);
});

Upvotes: 0

Lance Whatley
Lance Whatley

Reputation: 2455

I wrote this small function some time back to handle paginating arrays for me. You shouldn't use it on very large arrays, but it does the job for relatively smaller ones. Its usage should be pretty self-explanatory:

function paginateArray(ary, perPage=10, pageNumber=1) {
  const start = perPage * (pageNumber - 1)

  const size = ary.length
  return {
    data: ary.slice(start, start + perPage),
    numberOfPages: Math.ceil(size / perPage),
    currentPage: pageNumber,
    dataLength: size
  }
}

paginateArray([1,2,3,4,5], 2, 1]
// {data: [1, 2], numberOfPages: 3, currentPage: 1, dataLength: 5}

Upvotes: 2

Related Questions