javascript - 动态分页纯Js

Question

我正在尝试用纯 Javascript 创建动态分页。我遇到了一些障碍，例如尝试创建动态分页并链接页码以显示正确的项目。这是我正在努力解决的代码，请参阅 Codepen查看整个项目。

初始变量:

var currentPage = 1;
var numPages = 0;
var studentsPerPage = 10;
var index;

在 Js 中创建分页:

var paginationFilter = function pageFilter (nbOfEntries) {
var pagination = document.createElement('div');
var ulList = document.createElement('ul');
var liList = document.createElement('li');
var pageLink = document.createElement('a');

pagination.setAttribute("class", "pagination");
pageLink.setAttribute("class", "navlink");
pageLink.setAttribute("href", "#");

pagination.appendChild(ulList);
ulList.appendChild(liList);
liList.appendChild(pageLink);

return pagination;  };

以下是我的函数，用于查找学生列表的长度、查找要创建的页数、隐藏所有元素并仅显示列表中的前 10 个项目。其他项目应该在下一页上。

var numberOfStudents = function () {
var numberOfStudents = eachStudent.length;
return (numberOfStudents);}

//Finding the number of pages
var numberOfPages = function () {
    var numberOfPages = parseInt(numberOfStudents() / studentsPerPage);
    if ( numberOfStudents() % studentsPerPage > 0 ){
        numPages += 1;
    }
    return numberOfPages;
}
//Hiding all the students
var hideAll = function () {
    for (var i = 0; i < numberOfStudents(); i++) {
        eachStudent[i].style.display = "none";
    }
};

//Display only the 10 first items on the page
function showStudents (number) {
    for (var i = 0; i < studentsPerPage; i++) {
        index = number * studentsPerPage - studentsPerPage + i;
        eachStudent[index].style.display = "block";
        console.log(index);
    } 
};



function createPages () {
    for (var i = 0; i <= numberOfPages(); i++) {
        page.appendChild(paginationFilter());
        var navlink = document.getElementsByClassName(".navlink");
        var linkText = document.createTextNode(i);
        //i'm trying to append the node to the link in order to create the pagination links dynamically but it's not working...
        navlink.appendChild('linkText');
        console.log(linkText);
    }
};

所以我想知道如何根据列表中的项目数量动态创建分页。这些项目也会动态过滤，因此页数需要“实时”更新。

fiddle 链接:http://codepen.io/Delano83/pen/XjYxkQ

对我的代码的任何评论或评论表示赞赏!

Answer 1

尝试这个纯 JavaScript 实现的 Codepen 示例。

https://codepen.io/karpovsystems/pen/fFHxK

注意:这不是我的代码，只是在 codepen 上找到的

var Pagination = {

    code: '',

    // --------------------
    // Utility
    // --------------------

    // converting initialize data
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 300;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
    },

    // add pages by number (from [s] to [f])
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },

    // add last page with separator
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },

    // add first page with separator
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },



    // --------------------
    // Handlers
    // --------------------

    // change page
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },

    // previous page
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },

    // next page
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },



    // --------------------
    // Script
    // --------------------

    // binding pages
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },

    // write pagination
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
        Pagination.Bind();
    },

    // find pagination type
    Start: function() {
        if (Pagination.size < Pagination.step * 2 + 6) {
            Pagination.Add(1, Pagination.size + 1);
        }
        else if (Pagination.page < Pagination.step * 2 + 1) {
            Pagination.Add(1, Pagination.step * 2 + 4);
            Pagination.Last();
        }
        else if (Pagination.page > Pagination.size - Pagination.step * 2) {
            Pagination.First();
            Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
        }
        else {
            Pagination.First();
            Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
            Pagination.Last();
        }
        Pagination.Finish();
    },



    // --------------------
    // Initialization
    // --------------------

    // binding buttons
    Buttons: function(e) {
        var nav = e.getElementsByTagName('a');
        nav[0].addEventListener('click', Pagination.Prev, false);
        nav[1].addEventListener('click', Pagination.Next, false);
    },

    // create skeleton
    Create: function(e) {

        var html = [
            '<a>&#9668;</a>', // previous button
            '<span></span>',  // pagination container
            '<a>&#9658;</a>'  // next button
        ];

        e.innerHTML = html.join('');
        Pagination.e = e.getElementsByTagName('span')[0];
        Pagination.Buttons(e);
    },

    // init
    Init: function(e, data) {
        Pagination.Extend(data);
        Pagination.Create(e);
        Pagination.Start();
    }
};



/* * * * * * * * * * * * * * * * *
* Initialization
* * * * * * * * * * * * * * * * */

var init = function() {
    Pagination.Init(document.getElementById('pagination'), {
        size: 30, // pages size
        page: 1,  // selected page
        step: 3   // pages before and after current
    });
};

document.addEventListener('DOMContentLoaded', init, false);