Question

我对JavaScript还是很陌生，所以很抱歉，如果这很明显或者问题不清楚。

我有一个分页作业，我必须使用一个函数将学生列表限制为每页10个。我允许使用一些jQuery，但绝对没有插件。

目前，我有：

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

如何使用此功能创建函数？限制学生。我当时在考虑使用循环，但我不知道从哪里开始。

谢谢！

Answer 1

一段时间以前，我写了这个小函数来为我处理分页数组。您不应该在非常大的阵列上使用它，但是它可以在相对较小的阵列上使用。它的用法应该很不言自明：

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}

Answer 2

是否将分页.student-item的DOM元素已加载到页面上的分配？这不是标准的，但是如果这是分配的任务，那么我建议您隐藏不在“当前页面”上的.student-item。

// 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);

Answer 3

似乎您正在使用jQuery操作DOM，并且实际上可能没有直接供您使用的数据。从专业的角度来看，此代码不是最佳的解决方案，但我认为适合您的教育情况。

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);
});

使用Vanilla JavaScript分页

3 个答案: