Question

我是JavaScript新手。我尝试将分页添加到JavaScript表中，但是该表未形成并且搜索/排序也无法正常工作。以下是我尝试进行分页的代码。我认为问题在于分页与主代码的集成。

我的完整代码的提琴：https://jsfiddle.net/ujv1cxna/2/
文件：https://files.fm/f/yf5hbk7e

输出：

var list =tableObj.rows;
  var pages = paginate(10, list);
        function paginate(n, list) {
            return divide(n, list).map(function (items, index) {
                var number = n * index;

                return {
                    start: number + 1,
                    end: number + items.length,
                    items: items
                };
            });
        }

        var header = document.getElementById("pageHeader");
        var items = document.getElementById("pageItems");
        var buttons = document.getElementById("pageButtons");

        appendChildren(buttons, pages.map(function (page, index) {
            var button = document.createElement("button");
            button.addEventListener("click", display);
            button.innerHTML = index + 1;
            return button;

            function display() {
                displayPage(page);
            }
        }));

        displayPage(pages[0]);

        function displayPage(page) {
            header.innerHTML = "Items " + page.start + " to " + page.end + ":";

            items.start = page.start;

            items.innerHTML = "";

            appendChildren(items, page.items.map(function (item) {
                var li = document.createElement("li");
                li.innerHTML = item;
                return li;
            }));
        }

        function appendChildren(element, children) {
            children.forEach(function (child) {
                element.appendChild(child);
            });
        }

        function take(n, list) {
            return list.slice(0, n);
        }

        function drop(n, list) {
            return list.slice(n);
        }

        function concat(lists) {
            return Array.prototype.concat.apply(this, lists);
        }

        function divide(n, list) {
            if (list.length) {
                var head = take(n, list);
                var tail = drop(n, list);
                return concat.call([head], [divide(n, tail)]);
            } else return [];
        }
    buildTable(tableObj.headers, list);
            };

Answer 1

我试图解决您的问题，

这是我更新的jsfiddle link

我做了以下更改。

创建了下一个，上一个以及显示当前页面的位置。
创建了一个称为分页的对象，它负责执行上一个，下一个或重置分页。

从文件中将数据加载到表中后，您需要调用pagination.init（），以便它将分页设置为初始阶段。

仅在初始化功能中，我为下一个和上一个按钮设置事件。

any

pagination.currentPageItems 保存着当前视图（页面）的数据，因此您只需要对pagination.currentPageItems进行过滤或排序操作。这将过滤/排序当前页面的数据。

Javascript Dom表分页

1 个答案: