Question

我渴望在流量环境中看到一个分页的例子，我无法理解它是如何工作的。我已经看了redux's example，但这并不是真正的分页，只是加载更多＆＃34;按钮。我正在寻找的是一种可能对数百万条记录进行分页的方法（所以你必须使用延迟加载）。

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

1）有人可以在不加载第1-19页的情况下加载第20页（例如，点击超链接）。

2）如果有人编辑了内联记录，然后该记录不再满足过去包含在该列表中的过滤器，我们就需要加载更多数据来填补留下的空白区域。

3）监控道具以更改页码，如果该页面尚未加载，您需要加载更多数据。

我想要一些注意如何克服这些陷阱的例子。如果您有任何建议，请告诉我。谢谢！

Answer 1

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

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

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

<强> Pagination.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>
    );
}
});

<强> Pagination.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;

}
});

Flux Pagination

1 个答案: