分页和内容过滤器

Question

这是我想要实现的目标。

1. 用户点击基于多个li元素的页码
2. 每页最多显示10个项目
3. 页面首先显示只有10个项目

我根据html文档中的编号创建了页码。

然后创建了一个需要充当过滤器的单击功能。例如1显示1-10学生div 2显示11 - 21.

以下是我的代码笔http://codepen.io/fun/pen/pbwvYo?editors=1011

的链接

此处还有代码笔中的JavaScript。

任何建议都将受到赞赏。

        // Count the number of .student-item
var studentItemCount = document.getElementsByClassName('student-item').length;
// Calc pages needed - number of student divs  / 10 rounded up.
var pageCalc = Math.ceil(studentItemCount / 10);
// Pagination html
var paginationText = "<ul>";
// Loop through page calc + 1
for (var i = 1; i < pageCalc + 1; i++) {
  // Pagination html number
  paginationText += "<li>" + i + "</li>";
}
//Pagination html
paginationText += "</ul>";
// Get padination id
var pagination = document.getElementById('pagination');
// Display pagination html 
pagination.innerHTML = paginationText;
// Hide all but the first 10 students when the page loads.

$('.student-item:gt(9)').hide();

// Hide 11 - 54 student-item divs 
// on Click of 2 toggle class to display 11-20 students
$('#pagination li').on('click', function() {
  // Get page number
  var page = $(this).text();

  if (page == '1') {
    // Hides all others apart from first ten
    $('.student-item:gt(9)').hide();

  } else if (page == '2') {

    $('.student-item:gt(9)').hide();

  }

});