javascript - 通量分页

Question

我很想看到一个在 flux 环境中分页的例子，我不知道它是如何工作的。我看过redux's example ，但这并不是真正的分页，只是一个“加载更多”按钮。我正在寻找的是一种对可能数百万条记录进行分页的方法(因此您必须使用延迟加载)。

以下是我遇到的一些陷阱:

1) 有人可以在不加载第 1-19 页的情况下加载第 20 页(例如，通过单击超链接)。

2) 如果有人内联编辑记录，然后该记录不再满足用于包含在该列表中的过滤器，我们将需要加载更多数据以填充留下的空白空间。

3) 监控页码更改的 Prop ，如果该页面尚未加载，则需要加载更多数据。

我喜欢一些说明如何克服这些陷阱的示例。如果您有任何建议，请告诉我。谢谢!

Answer 1

我根据你的标题和最后一句话添加了一个例子。要解决您的具体问题:

1. 当然可以从第20页开始加载，只是从更高的请求参数开始
2. 在提交之前编辑记录不会改变状态，对吧？因此，一旦您提交编辑更改，过滤器就会应用，如果您编辑了过滤器设置的条件，您的记录将被删除
3. 您可以在分页时进一步获取结果集 - 如果您单击下一个，它将按顺序向前加载下一个，或者如果您单击结果从 40 开始，它将获取 40-X，其中 X 是每个的计数获取您指定的。我发现的代码示例使用 10，就像大多数应用程序一样，因此您将从 40 开始获取，但会得到 40 到 50。

This page.基本上使用事件列表存储来保存子对象访问的数据，分页组件本身，最后是分页存储

"updates the current State of the active page and provide a function to calculate the number of pages available to the Pagination based on the Total amount of items and how many of those items are to be displayed per page"

我相信要实现此代码，您需要一个带有查询参数(例如搜索关键字和结果集首选项)的 API 请求。此代码旨在发送一个 api 调用，该调用返回一个 json 响应，该响应可以被分解并相应地呈现(此示例以 10 个为一组。)
对于另一个工作示例，可能还有很多其他示例，但这里是 one that I know of亲自。下面提供的代码由 Adam Ellsworth 发布，代码归功于他:

EventListStore.js

// requires go here ...

var events = [], // Default Event listing
total  = 0,  // Default number of Available Events
start  = 0,  // Default start
end    = 9,  // Default end
amt    = 9;  // Number of Events to list per page (0-based)


processTurnPage: function (page) {
start = (page - 1) * amt;
end = start + amt;
}


var EventListStore = assign({}, EventEmitter.prototype, {

...

getTotal: function () {
    return total;
},
getStart: function () {
    return start;
},
getEnd: function () {
    return end;
},
getAmountPerPage: function () {
    return amt;
},

...

// emitChange, addChangeListener, removeChangeListener
});

EventListStore.dispatchToken = EventListDispatcher.register(function (payload) {

var action = payload.action,
    data   = payload.action.data;

switch (action.actionType) {
    case PageConstants.TURN_PAGE:
        processTurnPage(data);

        // Omitted:
        // Call the API to get new event data based on our new Page params

        EventListStore.emitChange();
        break;
}
});

分页.Jsx

// requires go here ...

var LIMIT = 12; // The amount of clickable <li> to show 
function getNavigation (count, per) {
/**
 * This is where we build our <li /> elements. I'm omitting our code     because
 * there are too many ways in which pagination can be displayed, and ours
 * is specific to our needs.
 *
 * What is returned below is just the gist of it.
 */

var pages = []; // what we'll store our JSX <li /> elements in.

var pages = PaginationStore.getTotalPageCount(count, per);

/**
 * Translate our 0-based pagination data to a user-friendly representation
 * by starting at 1
 */
for (var i = 1; i <= pages; i++) {
    pages.push(
        <li className="page" data-value={i} key={i}>
            <a href="#">{i}</a>
        </li>
    );
}

return pages;
}

var Pagination = React.createClass({

componentDidUpdate: function (prevProps, prevState) {

    var self = this;

    $('.page').unbind().on('click', function (e) {
        var value = $(this).data('value');
        if (value != self.state.page) {
            EventViewActions.turnPage(value);
        }
    });
},


/**
 * Note here that in our EventList.jsx Component we're instantiating our
 * <Pagination /> component thusly:
 *
 * <Pagination total={this.state.total} per={this.state.amount} />
 */
render: function () {
    var navigation = getNavigation(this.props.total, this.props.per);

    return (
        <ul>
            {navigation}
        </ul>
    );
}
});

分页.jsx

// requires ...

var _page = 1; // Default page

updatePage: function (page) {
console.log('changing page: ' + _page + ' -> ' + page);
_page = page;
}

var PaginationStore = assign({}, EventEmitter.prototype, {

getPage: function () {
    return _page;
},
getTotalPageCount: function (total, per) {

    var pages = total - 1;

    if (pages > 0) {
        if (per < pages) {
            return Math.ceil(pages / per);
        }
        return 1; // only one page of items
    } else {
        return 0; // no items
    }
},

...
});

PaginationStore.dispatchToken = EventListDispatcher.register(function (payload) {

var action = payload.action,
    data   = payload.action.data;

switch (action.actionType) {
    case PageConstants.TURN_PAGE:
        updatePage(data)
        PaginationStore.emitChange();
        break;

}
});